질문을 삭제하지 말아주세요.!
 
1
0
-1

제 컴퓨터(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 ------------------------------------

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/

elixir( function( 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'});
});


    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      VM의 콘솔에서 $ gulp watch 명령을 수행했다는 말씀이시죠? 얼핏 보기에 불가능해 보이는데요.

      VM에서 $ gulp watch를 수행하면 로컬 컴퓨터의 브라우저에서 http://localhost:3000(BrowerSync의 기본 URL) 이 자동으로 열리나요?

      1. 수수나무

        http://myapp.laravel.test:3001/ 

        위와같이 접속하면 Browsersync 관리페이지로는 접속이 되고,

        gulp 가 reflesh 될때마다 리로드가 됩니다.

        혹시나 해서 VirtualBox에 방화벽은 중지시켜 놨습니다.


      2. 수수나무

        http://localhost:3000

        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


      3. 김주원

        마지막 에러는 Vue를 로드하지 못해서 그런 것 같은데, Vue를 호출하는 부분을 주석 처리해 보세요.

        https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js#L16-L20

      4. 수수나무

        제가 처음에 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'
        //});



        도움 주셔서 감사합니다!~


      CommentAdd your comment...