BrowserSync CSS 注入 + runSequence

Question

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

我的监视任务：

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);

});

样式任务：

import gulp         from 'gulp';
import sass         from 'gulp-sass';
import gulpif       from 'gulp-if';
import sourcemaps   from 'gulp-sourcemaps';
import browserSync  from 'browser-sync';
import autoprefixer from 'gulp-autoprefixer';
import handleErrors from '../util/handle-errors';
import config       from '../config';

// SASS -> CSS

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

  //const reload = browserSync.reload;

  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))
    .pipe(browserSync.stream()); // stream
    //.pipe(gulpif(browserSync.active, browserSync.reload({ stream: true })));

});

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

Answer 1

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

如果您正在运行 browserSync.stream() 管道和 on('change', reload) 监视功能，这可能是导致您的问题的原因。使用 Browsersync 时，您希望为每个任务使用一个或另一个，因为它们执行相同的操作；一个在任务中内联，另一个被手表调用。就我而言，我喜欢在数组函数中使用手表上的重启操作，如下所示。

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]);
});