javascript - BrowserSync CSS 注入(inject) + runSequence

Question

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

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

});

样式任务:

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 时，您希望对每个任务使用一个或另一个，因为它们的作用相同；一个在任务中内联，另一个被 watch 调用。就我而言，我喜欢在数组函数中对 watch 使用重启操作，如下所示。

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