CSS inject not working with Gulp + Browsersync

Question

I'm new in gulp, I used to work with grunt, and I'm having some troubles with gulp now.

The most important of them is the auto CSS inject, that isn't woking and after a lot of time I don't know why. Can anyone help me? And also give me some suggestions about my config? Thanks in advance!

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    csso = require('gulp-csso'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    sourcemaps = require('gulp-sourcemaps'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();


var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('vendors', function() {
  return gulp.src('./assets/js/vendors/*.js')
    .pipe(concat('vendors.js'))
    .pipe(gulp.dest('./assets/js/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('./assets/js/'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Vendors task complete' }));
});

gulp.task('sass', function() {
  return gulp.src('./assets/sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('./assets/css/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(csso())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./assets/css/'))
    .pipe(browserSync.stream())
    .pipe(notify({ message: 'Sass task complete' }));
});


gulp.task('serve',  function() {

    browserSync.init({
        proxy: "pageone.dev",
        files: "./assets/css/*.css",
        bsFiles: "./assets/css/*.css"
    });

    gulp.watch('./assets/sass/**/*.scss', ['sass']);
    gulp.watch('./assets/js/vendors/**.js', ['vendors']);
    gulp.watch('*.php', './assets/css/*.cs', './assets/js/*.js;').on('change', browserSync.reload);

});


gulp.task('default', ['serve', 'sass']);

Answer 1

Sourcemaps!

One of the annoying things that I spent too much time debugging is why browser-sync reloads the whole page instead of injecting CSS changes.

After diving into browser-sync files I found out that there default list for injecting files is set to:

injectFileTypes: ["css", "png", "jpg", "jpeg", "svg", "gif", "webp"],

The thing that might not be very apparent is that if any other file that is not on injectFileTypes gets changes the browser will reload. In my case the extra files that was changed were the sourcemap files *.css.map.

If you don't explicitly tell browsersync to ignore sourcemap files when changing or in the initial config the browser will always reload. There's two ways I believe to do this, one through the browsersync.stream method like the following:

  // Only stream the matching files. Ignore the rest.
  .pipe(browsersync.stream({match: '**/*.css'}));

Or on initializing browsersync like the following through the files option with excluding pattern to the sourcemaps files: ['!**/*.maps.css'].

I like the first one since I am using browsersync with nodemon as a proxy so I don't really use the files argument and setup my own gulp watch statements.

One other way to do this is to update the injectFileTypes option when initializing browsersync, however, I am not sure if the CSS sourcemaps are injectable.

I hope this help someone having the same issue!

Answer 2

I found browserSync.stream very unreliable. I'd rather suggest a reload through a watch process:

Kill the line with browserSync in your Gulpfile:

gulp.task('sass', function() {
  return gulp.src('./assets/sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('./assets/css/'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(csso())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./assets/css/'))
    .pipe(notify({ message: 'Sass task complete' }));
});

And add the reload while watching:

gulp.task('serve',  function() {

   browserSync.init({
      proxy: "pageone.dev",
      files: "./assets/css/*.css",
      bsFiles: "./assets/css/*.css"
  });

  gulp.watch('./assets/sass/**/*.scss', ['sass']);
  gulp.watch('./assets/js/vendors/**.js', ['vendors']);
  gulp.watch('*.php').on('change', browserSync.reload);
  gulp.watch('./assets/js/*.js').on('change', browserSync.reload);
  gulp.watch('./assets/css/*.css').on('change', browserSync.reload);

});

Woah... I saw that you already did this. But there's a type on your CSS files, one "s" is missing:

 gulp.watch('*.php', './assets/css/*.cs', './assets/js/*.js;').on('change', browserSync.reload);

There's also a semi-colon at your JS files glob, and I'm not sure if you can pass multiple Globs here. Try using this lines:

  gulp.watch('*.php').on('change', browserSync.reload);
  gulp.watch('./assets/js/*.js').on('change', browserSync.reload);
  gulp.watch('./assets/css/*.css').on('change', browserSync.reload);