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.