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 中的任何内容时运行 gulp，而且我还有一个 Vue 组件文件可以导入到 main.js 中。我经常更改这个文件，当我更改那个文件时，我真的希望 gulp watch 能够捕捉到它。有什么建议吗？

如果上述方法不可行，是否有办法运行 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}
})