Gulp doesnt watch for any SCSS changes. Do I have to use gulp-ruby-sass?

Question

I have gulp file set up to watch for changes. I'm developing an application in ReactJS using Redux architecture. What I've noticed is that the gulp does not watch for any changes in the SCSS files.

/*eslint-disable */
var path = require('path');
var runSequence = require('run-sequence');
var install = require('gulp-install');
var spawn = require('child_process').spawn;
var $ = require('gulp-load-plugins')({
    pattern: [
        'gulp',
        'gulp-*',
        'gulp.*',
        'merge-stream',
        'del',
        'browserify',
        'watchify',
        'vinyl-source-stream',
        'vinyl-transform',
        'vinyl-buffer',
        'glob',
        'lodash',
        'less-plugin-*',
        'mochify'
    ],
    replaceString: /^gulp(-|\.)/,
    rename: {
        'merge-stream': 'mergeStream',
        'del': 'delete'
    }
});

var env = require('env-manager')({
    argv: process.argv,
    dir: path.join(__dirname, 'environments'),
    base: 'base.js',
    pattern: '{env}.js',
    defaults: {
        'env': 'development'
    }
});

$.util.log($.util.colors.magenta('Running in ' + env.name + ' environment'));

require('gulp-tasks-registrator')({
    gulp: $.gulp,
    dir: path.join(__dirname, 'tasks'),
    args: [$, env],
    verbose: true,
    panic: true,
    group: true
});

$.gulp.task('clean', ['clean:server', 'clean:client'], function task(done) {
    done();
});

$.gulp.task('install', function () {
    return $.gulp.src([ './package.json']).pipe(install());
});

$.gulp.task('build', function task(done) {

    return runSequence(
        //'lint',
      //  'install',
        'clean',
        'build:server',
        'build:client:images',
        'build:client:fonts',
        [
            'build:client:scripts',
            'build:client:styles'
        ],
        'build:client:html',
        done
    );
});

$.gulp.task('run-wrapper', function(done) {
    var server = spawn('node', ['serviceWrapper.js'], {stdio: ['inherit']});
    server.stderr.on('data', function(data){
        process.stderr.write(data);
    });

    server.stdout.on('data', function(data) {
        process.stdout.write(data);
    });
    server.unref();
});

$.gulp.task('default', function task(done) {
    runSequence('build', ['serve', 'run-wrapper','watch'], done);
});

$.gulp.task('run', function task(done) {
    runSequence('serve', done);
});

/*eslint-enable */

Answer 1

In what you've provided, there's no watch task or Sass task (though you do call a task named watch so if running gulp (the default task) isn't giving you an error you must have defined the task named watch somewhere).

There are two Sass plugins for gulp, one using Ruby Sass (gulp-ruby-sass) and one using LibSass (gulp-sass). You can read about the difference here, but in short gulp-sass will probably be faste. The best way to find out is to try one and then the other and compare gulp's console logs (where it says "finished task after x ms").

Here's a SASS-watching example, edited very slightly from the example in the gulp-sass readme (assumes that gulp-sass is in your package.json, in which case it will have been imported by your gulp-load-plugins call). $.s added to match the code you provided

$.gulp.task('sass', function () {
  return gulp.src('yourstylespath/*.scss') // grab the .scss files
    .pipe(sass().on('error', sass.logError)) // compile them into css, loggin any errors
    .pipe(gulp.dest('yourcompiledcsspath')); // save them in yourcompiledcsspath
});

$.gulp.task('sass:watch', function () {
  gulp.watch('yourstylespath/*.scss', ['sass']); // "run the task 'sass' when there's a change to any .scss file in yourstylespath
});

---

Side notes:

• Considering all the packages you're using that don't follow the "gulp-packagename" naming scheme, it might be more efficient to just write them out individually like this (of course depends on how many packages you're using)

  var delete = require('del'), mergeStream = require('merge-stream'), ...;

• Looks like your run task could just be this? $.gulp.task('run', ['serve']);