BrowserSync CSS injection + runSequence

Question

I have a gulp project that runs certain tasks in a particular order. I'm trying to use browserSync to inject CSS styles as the sources are changed then compiled, same with my HTML files. I've tried various methods to get browserSync to update my changes such as appending browserSync.reload in my tasks, as well as adding .on('change', reload) to the end of the files I want to watch in my watch task.

My watch task:

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

});

Styles task:

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

});

Is there anything I can check further or that needs to be changed?

Answer 1

Not sure if you are still looking for an answer, but for reference:

If you are running the browserSync.stream() pipe and the on('change', reload) watch function that might be what is causing your issue. When using Browsersync you want to use one or the other for each task as they do the same; one is inline in the task vs. the other gets called with the watch. In my case I like using the restart action on the watch in the array function as shown below.

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