javascript - 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...)

我不仅希望 gulp 在我更改 main.js 中的任何内容时运行，而且我有一个导入到 main.js 中的 Vue 组件文件。我经常更改此文件，我真的很希望 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}
})