gulp.watch 完成后如何运行任务并继续观看？答案

【问题标题】：How to run a task after gulp.watch complete and still continue watching?gulp.watch 完成后如何运行任务并继续观看？
【发布时间】：2016-09-16 03:11:20
【问题描述】：

所以我很难让watch 和mix 一起工作。

我有我的 gulpfile，它可以做类似的事情来观看 sass：

gulp.task('default',function(){
    gulp.src('resources/assets/sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('resources/assets/css/'));

    gulp.watch('resources/assets/sass/**/*.scss',['styles']);
})

我也有我的混合脚本，它使用之前任务的输出来执行我的 css 文件：

elixir(function(mix) {
    mix.styles(
        [
            "../metronic/global/css/components-rounded.css",
            "../metronic/global/css/plugins.css",
            "../metronic/admin/layout3/css/layout.css",
            "../metronic/admin/layout3/css/custom.css",
            "../metronic/admin/pages/css/timeline.css",
            "../dist/sweetalert.css",
            "../dist/toastr.min.css",
            "../css/global.css",
        ],
        'public/css/layout.css'
    );
}

问题是我不知道如何将两者结合起来，因为如果我将我的 watch 放入 elixir(function) 它会停止该过程，如果我将它放在病房之后它只会在 gulp 上工作一次。

然后我的问题可能是：gulp.watch 完成后如何运行任务并继续观看？

【问题讨论】：

标签： laravel sass gulp laravel-elixir

【解决方案1】：

我假设您所有的.scss 文件都没有以_ 为前缀。如果在.scss 文件前加上_，那么scss 解析器不会将.scss 文件编译为独立文件。因此，从技术上讲，您不需要elixir（再次假设 elixir 用于合并所有 css 文件）。您的 gulp 代码将是：

gulp.task('default',function(){
    gulp.src('resources/assets/sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('resources/assets/css/'));

    gulp.watch('resources/assets/sass/**/*.scss',['styles']);
})

现在，执行以下操作：

为所有.scss 文件添加前缀_。示例：_components-rounder.scss、_plugins.scss 等。
创建一个layout.scss（不带_前缀）并在其中插入以下代码：

@import "relative/path/to/components-rounder";
@import "relative/path/to/plugins";
// Include all other scss files below without underscore prefix and extension as I shown above

【讨论】：

好主意，但我需要使用长生不老药：/我终于设法做到了，并在下面发布了答案:)

【解决方案2】：

使用gulp-batch

npm install gulp-batch --save-dev

在其他地方运行你的 sass 东西，让 watch 在运行你的 sass 的同时做它所做的事情

var batch = require('gulp-batch');

gulp.task('default',function(){
    gulp.src('resources/assets/sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('resources/assets/css/'));
})

gulp.task('watch',function(){
    // Run watch
    gulp.watch('resources/assets/sass/**/*.scss',['styles'], batch(function(events, cb) {
      // run every time on changes
      gulp.start('default', cb);
    }));
})

【讨论】：

【解决方案3】：

好的，经过一小时的脱发后，解决方案是：

首先，您必须使用elixir，但我还没有找到其他合适的解决方案。

当你看到它时相当容易：mix.sass("*.scss","resources/assets/css/global.css");

完成此操作后不要只使用gulp，而是使用gulp watch，它将查找您的elixir 函数文件中的任何更改。

由于它包含mix.sass(...) 修改的文件，它会自动重新启动您的风格的混合。

最后看起来像这样：

elixir(function(mix) {

    mix.sass("*.scss","resources/assets/css/global.css");

    mix.styles(
        [
            "../metronic/global/css/components-rounded.css",
            "../metronic/global/css/plugins.css",
            "../metronic/admin/layout3/css/layout.css",
            "../metronic/admin/layout3/css/custom.css",
            "../metronic/admin/pages/css/timeline.css",
            "../dist/sweetalert.css",
            "../dist/toastr.min.css",
            "../css/global.css",
        ],
        'public/css/layout.css'
    );

}

【讨论】：