Gulp BrowserSync not working with SCSS

Question

My gulp setup with browsersync seems to have a problem with detecting changes for SCSS files. It works perfectly fine for SLIM with reload and detection. There's no error with the gulp. The only problem is the browsersync fail to detect changes in SCSS file and reload or inject changes.

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    slim = require('gulp-slim'),
    autoprefix = require('gulp-autoprefixer'),
    notify = require('gulp-notify'),
    bower = require('gulp-bower'),
    image = require('gulp-image'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    browserSync = require('browser-sync').create();

var config = {
    sassPath: './source/sass',
    slimPath: './source/slim',
    bowerDir: './bower_components',
    jsPath: './source/js'
}

gulp.task('bower', function() {
    return bower()
      .pipe(gulp.dest(config.bowerDir))
});

gulp.task('js', function() {
    return gulp.src('./source/js/**/*.js')
      .pipe(concat('script.js'))
      .pipe(gulp.dest('./dist/js'));
});

gulp.task('icons', function() {
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
      .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('image', function () {
    gulp.src('./source/images/*')
      .pipe(image())
      .pipe(gulp.dest('./dist/images'));
} );

gulp.task('css', function() {
    return sass('./source/scss/**/*.scss', {
            style: 'compressed',
            loadPath: [
              './source/scss',
              config.bowerDir + '/bootstrap/scss',
              config.bowerDir + '/font-awesome/scss',
            ]
    }).on("error", notify.onError(function (error) {
            return "Error: " + error.message;
          }))
      .pipe(gulp.dest('./dist/css'))
      .pipe(browserSync.stream());
});

gulp.task('html', function() {
    gulp.src('./source/slim/**/*.slim')
      .pipe(slim({
        pretty: true
      }))
      .pipe(gulp.dest('./dist/'));
});

gulp.task('serve', ['css', 'html', 'js'], function() {
  browserSync.init({
    injectChanges: true,
    server: "./dist"
  });
  gulp.watch(config.sassPath + '/**/*.scss', ['css']);
  gulp.watch(config.slimPath + '/**/*.slim', ['html']).on('change', browserSync.reload);;
});



gulp.task('default', ['bower','js', 'icons', 'css', 'html', 'image', 'serve']);
gulp.task('build',['bower', 'js', 'icons', 'css', 'html', 'image'] );

score 0 · Answer 1 · answered Jun 09 '16 at 05:47

This might not be the answer you are looking for but its the work around that I've been using since I ran into a similar issue using browserSync.stream() not firing off consistently.

'use strict';

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

gulp.task('serve',function(){
    browserSync.init({
        server: {
            baseDir: './dev/'
        },
        files: ['./dev/**/*.html',
                './dev/css/**/*.css',
                './dev/js/**/*.js',
                './dev/img/**/*.*'],
        notify: false
    });
});

As you can see, this uses browserSyncs own watch task as opposed to piping it through the entire build process, which can have its own advantages by making the serve task easily abstracted and pulled into another project.

Hope this helps.

It detects the changes in slim and output HTML but still doesn't do anything with SCSS. — Sean Lin, Jun 09 '16 at 06:04
Thats what I'm getting at. In your `html` task, you are not using `stream()` and instead firing off an `onchange`. What I'm saying is that I have found `stream()` to be inconsistent so by watching the the css file directly through browserSync, you will achieve the browser reload without using the `stream()` method. — Maneesh, Jun 09 '16 at 06:27

Gulp BrowserSync not working with SCSS

1 Answers1