Gulp fails to update css file during gulp.watch

4
votes

I'm having a strange issue that I can't figure out regarding gulp.

I have a gulp-sass task. When I change any of my .scss files I want it to recompile my sass files. Pretty simple.

This is my code

gulp-task

gulp.task('sass', function(){
  gulp.src('app/styles/app.scss')
    .pipe(sass({
        includePaths: require('node-bourbon').includePaths
    }))
    .pipe(gulp.dest('app/assets'));
});

gulp-watch

gulp.task('watch', function(){
   gulp.watch('app/styles/**/*.scss', ['sass']);

});

The problem is. When I run gulp watch it all acts normally. If I edit a .scss file it runs the task again. However the changes aren't reflected in the rendered .css file.

The curveball is if I press ctrl+c to stop the gulp.watch cycle THEN the changes are reflected in the rendered .css file

I'm wondering what is causing this to happen.

Any ideas?

3
gulp
I don't see the behavior you describe when using your tasks, which makes me think the problem is either environmental or elsewhere in your gulpfile. Could you post the smallest complete gulpfile.js that exhibits the problem? – Zak Johnson

3 Answers

3
votes

I had this problem using PHPStorm. It being my first gulpfile I was just experimenting with dummy html, js, and css, and looking at the generated code within the IDE. My code never updated after watch events!

Finally, I actually loaded site in browser...

When you look in browser the files are being updated, but for some reason they are not indexed by the IDE.

2
votes

I had this problem, and what fixed it for me is that I was in the wrong directory in Terminal. As soon as i cd'd to the directory containing the gulp file, all was well and changes were detected.

1
votes

Callback must be a function, not an array of task names. Try:

gulp.task('watch', function(){
  watch('js/*/.js', function() {
    gulp.start('scripts');
  });
});

You need to check your source directory or you need to update your dependencies. See related discussion

Check this thread as well: https://github.com/floatdrop/gulp-watch/issues/214#issuecomment-171282193