Question

所以我很难让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)它会停止该过程，如果我把它放在病房之后它只会在{{ 1}}一次。

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

Answer 1

我假设您的所有.scss文件都没有_的前缀。如果使用.scss为_文件添加前缀，则scss解析器不会将.scss文件编译为独立文件。因此，从技术上讲，您不需要elixir（再次，假设使用elixir来组合所有css文件）。你吞下的代码就是：

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

Answer 2

使用gulp-batch

npm install gulp-batch --save-dev

在其他地方运行你的sass东西，让我们在改变运行你的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);
    }));
})

Answer 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'
    );

}

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

3 个答案:

最后它看起来像这样：