2

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

当前gulpfile.js 看起来像这样，我正在考虑使用浏览器同步来执行此操作。除了我不确定如何实现这一点，因为这个框架使用 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']);
});

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

提前致谢！

4

2 回答 2

2

最终像这样解决它：

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 进行刷新。希望这可以帮助某人。

于 2015-01-02T18:25:15.160 回答
0

你在哪里启动服务器？您是否尝试遵循官方文档？

您必须设置与此类似的任务：

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

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

在手表上，您可以将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']);
});
于 2015-01-02T16:35:28.970 回答