Question

当我像这样使用stream()方法时，效果很好：

    var gulp = require('gulp'),
    watch = require('gulp-watch'),
    browserSync = require('browser-sync').create();

gulp.task('watch', function () {

    browserSync.init({
        notify: false,
        server: {
            baseDir: "app"
        }
    });       

    watch('./app/assets/styles/**/*.css', gulp.series('cssInject'));
});

    gulp.task('cssInject',  function () {
        return gulp.src('./app/temp/styles/styles.css').pipe(browserSync.stream());

    });

当我在执行stream()之前添加另一个任务时，只会完成该任务。

gulp.task('cssInject', gulp.series('styles'), function () {
        return gulp.src('./app/temp/styles/styles.css').pipe(browserSync.stream());
        });

控制台将输出：

[15:16:00] Starting 'cssInject'...
[15:16:00] Starting 'styles'...
[15:16:00] Finished 'styles' after 50 ms
[15:16:00] Finished 'cssInject' after 53 ms

但未注入CSS，更改仅在手动重新加载后应用。

我遵循了this course，其中他们使用了一些过时的具有不同语法的软件包： task()的第二个参数设置为数组：['styles']。它没有用，我发现您应该改用series()或paralell()。

有a question on StackOverflow看起来与我的相同，但是由于我是gulp新手用户，因此我无法设法找到问题的答案。

Answer 1

解决者：将cssInject定义为单独的task()，然后将其作为第二个参数放入series()中。

gulp.task('cssInject', function () {
    return gulp.src('./app/temp/styles/styles.css').pipe(browserSync.stream());
});

gulp.task('manageCSS', gulp.series('styles', 'cssInject'));

在其他任务之后使用browserSync.stream（）

1 个答案: