Gulp WatchがBrowserifyファイルの変更をキャッチしない

Question

laravel-elixir-vueify npmパッケージを使用しています。私が "スクリプト"または "スタイル"機能内のファイルを変更するたびに、Gulp watchがうまく動作します。しかし、私が "browserify"機能に持っている1つのファイルを変更するたびに、gulp watchは実行されません。ここに私のコードは次のとおりです。

var elixir = require('laravel-elixir'); 
require('laravel-elixir-vueify'); 

elixir(function(mix) { 
    mix.sass('app.scss') 
     .browserify(['main.js' 
     ], './public/js/main.js') 

     .scripts([ 
      'libs/jquery-2.1.1.js', 
      'libs/bootstrap.js', 
      'libs/vue.js', 
     ], './public/js/libs.js') 

     .styles([ 
      'libs/bootstrap.min.css', 
      'libs/style.css' 
     ], './public/css/libs.css'); 
}); 

私もちょうど無駄に以下を使用して試してみました：

mix.sass('app.scss') 
     .browserify(['main.js') 
(etc...) 

だけでなく、私は私がmain.jsで何かを変更するたびに実行するようにゴクゴクが好きで、私なりmain.jsにインポートされるVueコンポーネントファイルを持っている私はこのファイルを頻繁に変更します。そのファイルを変更すると、それを捕まえるためにガルプウォッチが本当に好きです。助言がありますか？

上記が不可能な場合は、gulpを実行する方法があるので、browserifyファイルのみを再コンパイルします（スクリプトとスタイルファイルをスキップします）。

Answer 1

あなたは

elixir(function(mix) { 
    mix.sass('app.scss'); 

    mix.browserify(['main.js' 
    ], './public/js/main.js'); 

    mix.scripts([ 
     'libs/jquery-2.1.1.js', 
     'libs/bootstrap.js', 
     'libs/vue.js', 
    ], './public/js/libs.js'); 

    mix.styles([ 
     'libs/bootstrap.min.css', 
     'libs/style.css' 
    ], './public/css/libs.css'); 
}); 

があなたのmain.jsファイル

import Vue from 'Vue'; 

とVUEのコンポーネントをインポートするためにこのコード行を書くことを覚えておいてください試みることができます。

import YourComponent from './yourPATH/YourComponent.vue'; 

は、それが動作願っています。

私gulpfile.js

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

require('laravel-elixir-vueify'); 


elixir(function(mix) { 
    mix.sass('app.scss','resources/css'); 

    mix.browserify('main.js'); 

    mix.styles([ 
     'libs/bootstrap.css', 
     'app.css' 
    ]); 

    mix.scripts([ 
     'libs/bootstrap.js', 
     'libs/jquery-2.2.2.js' 
    ]); 
}); 

私の基本的なmain.js

import Vue from 'Vue'; 
import Alert from './components/Alert.vue'; 

new Vue({ 
    el: 'body', 

    components: {Alert} 
})