Question

我正在使用laravel-elixir-vueify npm包。每当我更改＆＃34;脚本中的文件时，Gulp手表都能正常工作。或者＆＃34;样式＆＃34;功能。但是，每当我更改我在＆＃34; browserify＆＃34;中的1个文件时功能，gulp手表没有运行。这是我的代码：

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}
})

Gulp Watch没有捕捉Browserify文件中的更改

1 个答案: