Question

我试图让browsersync（with stream）正常工作，但它似乎并不适用于管道上下文。 sass编译正确，然后没有任何反应。我的代码如下：

gulp.task('sass', function () {
  gulp.src('../css/source/*.scss')
    .on('error', function (err) {

         notify.onError({
           title:    "Gulp",
           subtitle: "Failure!",
           message:  "<%= error.message %>",
           sound:    "Beep"
       })(err);
       this.emit('end');
    })

    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(concat('build.css'))
    .pipe(gulp.dest('../css/build/dev'))
    .pipe(browserSync.reload({stream:true}))
    .pipe(csso())
    .pipe(gulp.dest('../css/build/min'));
});


gulp.task('default', ['browser-sync'], function(){

    gulp.watch('../css/source/*.scss', ['sass']);

});

在我的终端中，它确实注册了它：

[BS] 1 file changed (build.css)
[BS] File changed: ../css/build/dev/build.css

我可以重新加载的唯一方法是将其添加到监视任务中：

gulp.watch("../css/build/dev/*.css",  browserSync.reload);

...但是使用这种方法我似乎无法启用流，因为它不接受某个功能。我也根据当前的文档尝试了browserSync.stream（）无济于事。

如果有帮助，这是browsersync任务：

gulp.task('browser-sync', ['sass'], function() {
    browserSync.init({
        proxy: 'local.test.com',
        host: '10.0.1.40'
    });
});

请帮忙！

Answer 1

将管道移至任务browserSync中的sass，然后将files密钥添加到browserSync.init()：

browserSync.init({
  ...
  files: ['../css/**/*.css'],
  ...
});

通过上述设置，您既不需要gulp.watch()（根据文件更改启动任务），也不需要依赖browserSync的gulp任务。只需运行gulp browser-sync。

请注意，这会直接监视CSS，以避免scss更改与browserSync之间的竞争条件。

Gulp browsersync管道无法正常工作

1 个答案: