javascript - 使用 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 注入浏览器。