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刷新浏览器。希望这有助于某人。

在CSS更改中使用浏览器同步重新加载页面

1 个答案: