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 reload： gulp.watch（，['styles']）; gulp.watch（，function（）{browsersync.reload（）;}）; 这样，您可以在更改中监视scss编译中的更改，并观察输出和重新加载输出CSS文件的更改。按照你的方式，你每次编译后重新加载也是如此。但是你需要一个watch方法来改变scss文件。如果要在编译后在管道中使用它，则必须将其作为

reload({stream: true})

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

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

1 个答案: