使用 browser-sync 在 CSS 更改时重新加载页面

Question

我在一个项目中使用Basscss，并尝试研究如何在 Gulp 中设置一个任务，当我对我的 .scss 文件进行更改时，该任务将刷新我的浏览器。

当前的gulpfile.js looks like this 和我正在考虑使用Browser Sync 来执行此操作。除了我不确定如何实现这一点，因为这个框架使用 Swig 模板。

我正在考虑做这样的事情，但这似乎不起作用。

var browserSync = require('browser-sync');

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('watch-css', ['basswork', 'site-basswork', 'customizer-data'], function() {
  gulp.watch([
    './src/**/*.css',
    './docs/src/css/**/*.css'],
    ['basswork', 'site-basswork', 'customizer-data', 'bs-reload']);
});

如果有人能就此向我提供任何帮助，我将不胜感激。

提前致谢！

Answer 1

最终像这样解决它：

var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('browser-sync', function(){
  browserSync({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task('sass', function() {
  gulp.src(['./scss/*.scss'])
  .pipe(sass({
    outputStyle: 'expanded'
  }))
  .pipe(gulp.dest('./css'))
  .pipe(minifycss())
  .pipe(gulp.dest('./css'))
  .pipe(reload({stream: true}));
});

现在，每次我对 .scss 文件进行更改时，浏览器都会使用更新后的 CSS 进行刷新。希望这对某人有所帮助。

Answer 2

你在哪里启动服务器？您是否尝试关注official docs？

你必须设置类似这样的任务：

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

您不需要任务来重新加载浏览器同步，每次调用此任务时，如果它没有运行，它将创建服务器，或者同步/重新加载文件。

在 watch 中，您只需将 browser-sync 任务添加到被调用任务的数组中，类似于您现在正在执行的操作：

gulp.task('watch-css', ['basswork', 'site-basswork', 'customizer-data'], function () {
    gulp.watch([
        './src/**/*.css',
        './docs/src/css/**/*.css'
    ], ['basswork', 'site-basswork', 'customizer-data', 'browser-sync']);
});