使用 gulp-browser-sync 重新加载而不传递任何参数

Question

我正在为我的项目编写 gulp 文件。代码如下：

gulp.task('sass', function() {
    gulp.src(paths.styles.src)
        .pipe(sass({
            outputStyle: 'compact',
            includePaths: [paths.styles.src]
        }))
        .pipe(autoprefix())
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(browserSync.reload());
});

如果*.scss 文件有任何更改，我正在尝试重新加载浏览器。 （我的paths.styles.src 是'dev/assets/scss/**/*.scss'）

但是最后一个管道不起作用。它只有在我进行一些配置时才有效：

.pipe(browserSync.reload({
    stream: true
}));

由于网上的文档不够清楚，谁能帮我解释一下。

非常感谢。

Answer 1

我以这种方式使用 browsersync 重新加载： gulp.watch(, ['styles']); gulp.watch(, function() { browsersync.reload(); }); 这样你就可以观察你的 scss 中的变化编译变化并观察输出和重新加载输出 CSS 文件的变化。 以您的方式，您每次编译后都重新加载，这也可以。但是您需要一种监视方法来更改 scss 文件。如果你想在编译后在管道中使用它，你必须将其定义为

reload({stream: true})

这样您就不会重新加载整个文档。 Browsersync 仅将新 CSS 注入浏览器。