Question

我有一个按特定顺序运行某些任务的gulp项目。我正在尝试使用browserSync来注入CSS样式，因为源代码已更改然后编译，与我的HTML文件相同。我尝试了各种方法让browserSync更新我的更改，例如在我的任务中附加browserSync.reload，以及将.on('change', reload)添加到我要在{{1}中查看的文件的末尾任务。

我的观察任务：

watch

样式任务：

import gulp        from 'gulp';
import config      from '../config';
import browserSync from 'browser-sync';

gulp.task('watch', () => {

  const reload = browserSync.reload;

  gulp.watch(config.src.styles, ['styles']).on('change', reload);
  gulp.watch(config.src.js, ['browserify']).on('change', reload);
  gulp.watch(config.src.views, ['pug']).on('change', reload);

});

有什么我可以进一步检查或需要更改吗？

Answer 1

不确定您是否仍在寻找答案，但仅供参考：

如果您正在运行可能导致问题的browserSync.stream()管道和on('change', reload)监视功能。使用Browsersync时，您希望为每个任务使用一个或另一个，因为它们会这样做;一个是内联的任务而另一个是用手表调用的。在我的情况下，我喜欢在数组函数中使用watch上的restart操作，如下所示。

gulp.task('styles', () => {
   return gulp.src(config.src.styles)
  .pipe(gulpif(!global.isProd, sourcemaps.init()))
  .pipe(sass({
     sourceComments: global.isProd ? false : 'map',
     outputStyle: global.isProd ? 'compressed' : 'nested'
  }))
  .on('error', handleErrors)
  .pipe(autoprefixer('last 2 versions', '> 1%', 'ie 8'))
  .pipe(gulpif(!global.isProd, sourcemaps.write('.')))
  .pipe(gulp.dest(config.dest.styles))

}）;

gulp.task('watch', () => {
  gulp.watch(config.src.styles, ['styles',browserSync.reload]);
  gulp.watch(config.src.js, ['browserify', browserSync.reload]);
  gulp.watch(config.src.views, ['pug', browserSync.reload]);
});

BrowserSync CSS注入+ runSequence

1 个答案: