Gulp not watching correctly

Question

I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.

My gulpfile.js has

    gulp.task('compass', function() {
      return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
      .pipe(compass({
        config_file: 'sites/default/themes/lsl_theme/config.rb',
        css: 'css',
        sass: 'scss'
      }))
      .pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
      .pipe(notify({
        message: 'Compass task complete.'
      }))
      .pipe(livereload());
   });

with

gulp.task('scripts', function() {
  return gulp.src([
      'sites/default/themes/lsl_theme/js/**/*.js'
    ])
    .pipe(plumber())
    .pipe(concat('lsl.js'))
    .pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
    // .pipe(stripDebug())
    .pipe(uglify('lsl.js'))
    .pipe(rename('lsl.min.js'))
    .pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
    .pipe(sourcemaps.write())
    .pipe(notify({
      message: 'Scripts task complete.'
    }))
    .pipe(filesize())
    .pipe(livereload());
});

and the watch function

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
  gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});

when I run gulp, the result is

[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms

and no changes are registered.

for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.

Answer 1

It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.

I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.

After creating a 'dest' folder to hold the new js everything started working just peachy.

Answer 2

My assumption is that you are on windows? Correct me if I'm wrong.

There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out

// .pipe(notify({
//   message: 'Scripts task complete.'
// }))

and see if the problem still exists.

If that does fix the issue, a solution from this thread may be helpful.

You can use the gulp-if plugin in combination with the os node module to determine if you are on Windows, then exclude gulp-notify, like so:

var _if = require('gulp-if');

//...

// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());

//...

     // use like so:
    .pipe(_if(!isWindows, notify('Coffeescript compile successful')))