VM의 콘솔에서 $ gulp watch 명령을 수행했다는 말씀이시죠? 얼핏 보기에 불가능해 보이는데요.
VM에서 $ gulp watch를 수행하면 로컬 컴퓨터의 브라우저에서 http://localhost:3000(BrowerSync의 기본 URL) 이 자동으로 열리나요?
http://myapp.laravel.test:3001/
위와같이 접속하면 Browsersync 관리페이지로는 접속이 되고,
gulp 가 reflesh 될때마다 리로드가 됩니다.
혹시나 해서 VirtualBox에 방화벽은 중지시켜 놨습니다.
http://myapp.laravel.test:3000
이런식으로는 접속이 되지 않습니다.
한가지 좀 이상한게 있는데요
크롬브라우저에서 콘솔을 열어보면 아래와 같은 에러가 뜹니다.
--------------------------------------
Uncaught ReferenceError: Vue is not defined
at eval (eval at <anonymous> (app-e71398b569.js:90), <anonymous>:16:1)
at Object.<anonymous> (app-e71398b569.js:90)
at __webpack_require__ (app-e71398b569.js:20)
at app-e71398b569.js:64
at app-e71398b569.js:67
마지막 에러는 Vue를 로드하지 못해서 그런 것 같은데, Vue를 호출하는 부분을 주석 처리해 보세요.
https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js#L16-L20
제가 처음에 gulp 설치할 때 뭔가 꼬였던것 같습니다.
싹 다 지우고 처음부터 책에 나온데로 다시 설치하고,
http://myapp.laravel.test:3000/docs 와 같은 방법으로 접속하니
브라우저 싱크가 잘 됩니다.
그리고 [BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set th e open option to false) 이 메시지는
'open' : false
옵션을 추가해서 해결했습니다.
------------------------- glupfile.js ---------------------
const elixir = require( 'laravel-elixir');
require( 'laravel-elixir-vue-2');
elixir( mix => {
mix.sass( 'app.scss');
mix.webpack( 'app.js');
mix.version( [
'css/app.css',
'js/app.js'
]);
//mix.copy( 'node_modules/font-awesome/fonts', 'public/build/fonts');
mix.browserSync( { proxy: 'myapp.laravel.test', 'open' : false});
});
------------------------------------------------------------
크롬에서 나오는 메시지도 말씀해 주신데로..
resources/assets/js/app.js 파일에 아랫부분 전부 주석처리하니 사라졌습니다.
//Vue.component('example', require('./components/Example.vue'));
//const app = new Vue({
// el: '#app'
//});
도움 주셔서 감사합니다!~
제 컴퓨터(Win10) VirtualBox 로 VM을 구성하여
CentOS - php5.6 환경에서 실습중인데요..
eth0 - 10.0.2.15
eth1 - 192.168.56.79 -> 외부에서 ssh 접속 IP
VM 상의 네트워크는 위와 같이 구성되어 있습니다.
VM상의 hosts 와 로컬PC hosts 를 myapp.laravel.test 로 잡아서 사용중이고요..
gulp watch 를 실행하면 아래와 같이 되며,
resources/assets/sass/app.scss 를 수정하면 gulp가 작동은 잘 됩니다.
그런데 브라우저에서는 reload가 자동으로 되지 않습니다.
----------------------
브라우저 접속은
http://myapp.laravel.test/docs 와 같이 했습니다.
----------------------
[laravel@ myapp]$ gulp watch
[06:26:32] Using gulpfile ~/myapp/gulpfile.js
[06:26:32] Starting 'all'...
[06:26:32] Starting 'sass'...
[06:26:33] Finished 'sass' after 657 ms
[06:26:33] Starting 'webpack'...
[06:26:33] Finished 'webpack' after 297 ms
[06:26:33] Starting 'version'...
[06:26:33] Finished 'version' after 41 ms
[06:26:33] Starting 'browserSync'...
[06:26:33] Finished 'browserSync' after 233 μs
[06:26:33] Finished 'all' after 1 s
[06:26:33] Starting 'default'...
┌───────────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task │ Summary │ Source Files │ Destination │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass() │ 1. Compiling Sass │ resources/assets/sass/app.scss │ public/css/app.css │
│ │ 2. Autoprefixing CSS │ │ │
│ │ 3. Concatenating Files │ │ │
│ │ 4. Writing Source Maps │ │ │
│ │ 5. Saving to Destination │ │ │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js │ public/js/app.js │
│ │ 2. Writing Source Maps │ │ │
│ │ 3. Saving to Destination │ │ │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.version() │ 1. Versioning │ public/css/app.css │ public/build │
│ │ 2. Rewriting File Paths │ public/js/app.js │ │
│ │ 3. Saving to Destination │ │ │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.browserSync() │ 1. Starting Browsersync │
└───────────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[06:26:33] Finished 'default' after 9.83 ms
[06:26:33] Starting 'watch'...
[06:26:33] Finished 'watch' after 50 ms
[BS] Proxying: http://myapp.laravel.test
[BS] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://10.0.2.15:3000
----------------------------------
UI: http://localhost:3001
UI External: http://10.0.2.15:3001
----------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set th e open option to false)
[BS] File changed: public/build/rev-manifest.json
[06:26:36]
[06:26:36] webpack is watching for changes
[BS] File changed: public/css/app.css
[BS] File changed: public/js/app.js
[06:26:38] Starting 'version'...
┌───────────────┬──────────────────────────┬────────────────────┬──────────────┐
│ Task │ Summary │ Source Files │ Destination │
├───────────────┼──────────────────────────┼────────────────────┼──────────────┤
│ mix.version() │ 1. Copying Source Maps │ public/css/app.css │ public/build │
│ │ 2. Versioning │ public/js/app.js │ │
│ │ 3. Rewriting File Paths │ │ │
│ │ 4. Saving to Destination │ │ │
└───────────────┴──────────────────────────┴────────────────────┴──────────────┘
[06:26:38] Finished 'version' after 19 ms
[BS] File changed: public/build/rev-manifest.json
------------------------ gulpfile.js ------------------------------------