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

i have gulp file set watch changes. i'm developing application in reactjs using redux architecture. i've noticed gulp not watch changes in 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 */

in you've provided, there's no watch task or sass task (though call task named watch if running gulp (the default task) isn't giving error must have defined task named watch somewhere).

there 2 sass plugins gulp, 1 using ruby sass (gulp-ruby-sass) , 1 using libsass (gulp-sass). can read difference here, in short gulp-sass faste. best way find out try 1 , other , compare gulp's console logs (where says "finished task after x ms").

here's sass-watching example, edited example in gulp-sass readme (assumes gulp-sass in package.json, in case have been imported gulp-load-plugins call). $.s added match code provided

$.gulp.task('sass', function () {   return gulp.src('yourstylespath/*.scss') // grab .scss files     .pipe(sass().on('error', sass.logerror)) // compile them css, loggin errors     .pipe(gulp.dest('yourcompiledcsspath')); // save them in yourcompiledcsspath });  $.gulp.task('sass:watch', function () {   gulp.watch('yourstylespath/*.scss', ['sass']); // "run task 'sass' when there's change .scss file in yourstylespath }); 

---

side notes:

• considering packages you're using don't follow "gulp-packagename" naming scheme, might more efficient write them out individually (of course depends on how many packages you're using)

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

• looks run task this? $.gulp.task('run', ['serve']);