I'm just started to use Gulp to improve my workflow. I'm currently have a task called styles that piles .less files, and a task called watch, to watch for changes in any .less file and, then, run styles task. My gulpfile.js contains this code:

var gulp = require( 'gulp' ),
        less = require( 'gulp-less' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        jshint = require( 'gulp-jshint' ),
        uglify = require( 'gulp-uglify' ),
        imagemin = require( 'gulp-imagemin' ),
        rename = require( 'gulp-rename' ),
        clean = require( 'gulp-clean' ),
        concat = require( 'gulp-concat' ),
        notify = require( 'gulp-notify' ),
        cache = require( 'gulp-cache' ),
        header = require( 'gulp-header' ),
        footer = require( 'gulp-footer' );

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/styles/main.less' )
        .pipe( less({ paths: ['src/styles/'] }) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( rename( 'main.min.css' ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( notify({ message: 'Styles task plete' }) );
} )

(...)

// watch task
gulp.task('watch', function() {

    // Watch .less files
    gulp.watch('src/styles/**/*.less', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
        gulp.run('styles');
    });
});

The problem is, when I run gulp watch, it starts the task and runs the styles task on the first time that I change a .less file. After the first time, I only got the message logged (File X was changed, running tasks...). Am I doing something wrong?

Thanks for any hint or help!

EDIT

Just some information as requested: I'm running Node.js 0.10.24 with Gulp 3.4.0. Here is a screenshot of the prompt output:

I'm just started to use Gulp to improve my workflow. I'm currently have a task called styles that piles .less files, and a task called watch, to watch for changes in any .less file and, then, run styles task. My gulpfile.js contains this code:

var gulp = require( 'gulp' ),
        less = require( 'gulp-less' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        jshint = require( 'gulp-jshint' ),
        uglify = require( 'gulp-uglify' ),
        imagemin = require( 'gulp-imagemin' ),
        rename = require( 'gulp-rename' ),
        clean = require( 'gulp-clean' ),
        concat = require( 'gulp-concat' ),
        notify = require( 'gulp-notify' ),
        cache = require( 'gulp-cache' ),
        header = require( 'gulp-header' ),
        footer = require( 'gulp-footer' );

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/styles/main.less' )
        .pipe( less({ paths: ['src/styles/'] }) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( rename( 'main.min.css' ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( notify({ message: 'Styles task plete' }) );
} )

(...)

// watch task
gulp.task('watch', function() {

    // Watch .less files
    gulp.watch('src/styles/**/*.less', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
        gulp.run('styles');
    });
});

The problem is, when I run gulp watch, it starts the task and runs the styles task on the first time that I change a .less file. After the first time, I only got the message logged (File X was changed, running tasks...). Am I doing something wrong?

Thanks for any hint or help!

EDIT

Just some information as requested: I'm running Node.js 0.10.24 with Gulp 3.4.0. Here is a screenshot of the prompt output:

• javascript
• node.js
• gulp

• Please add your gulp version as well as a copy of the terminal output. – SteveLacy Commented Jan 28, 2014 at 6:15
• Hi, @SteveLacy! I just updated the question with the information you asked! – Diego de Oliveira Commented Jan 28, 2014 at 14:06
• 1 Thanks for adding them. It seems that there may be an issue with your 'styles' as it logges, but the gulp.run does is not invoked. It should call a [gulp] Finished 'styles' in 347 μs. Example: i.imgur./yyOCpss.png I will ask the creator of gulp (I work with him) for farther info. – SteveLacy Commented Jan 28, 2014 at 16:08
• That's an info that I didn't knew, @SteveLacy! When I run manually the tasks, it just logs [gulp] running 'task'..., and indeed the task runs, because the files are piled, concatenated, etc. But I never got that message showing [gulp] Finished 'styles' in X μs. I'm looking forward to the feedback of the gulp creator. Thanks! – Diego de Oliveira Commented Jan 28, 2014 at 17:26
• I just talked to him, gulp.watch is built off gaze: github./shama/gaze, any issues with gulp.watch are usually to do with gaze. Suggestion: breakout all the parts until you have just the working watch. Then add the other tasks until you have the full file. It may just be a function not been called with the styles – SteveLacy Commented Jan 29, 2014 at 3:27

3 Answers 3

After @SteveLacy suggestion to break out my task parts and check if any of them was causing the troubles, I got my really dumb mistake that causes the error: gulp-notify works only on Mac and Linux, and my OS is Windows. From the plugin description:

Send messages to Mac Notification Center or Linux notifications (using notify-send) using the node-notifier module. Can also specify custom notifier (e.g. Growl notification).

Shame on me.

I follow a really good tutorial about getting started with Gulp, and gulp-notify was one of the plugins used on it. My mystake was not paying attention at the plugin details.

After I removed gulp-notify from my gulpfile.js, everything works as it should be, I got all the right logs and my gulp watch task works like a charm!

In short: AWAYS check a plugin patibility with your OS.

Thanks for everybody that spent time trying to help me!

I had the same problem, and mine was a total gulp newbie problem. If anyone is as pathetically new to gulp as I am, ensure your triggered watch functions end with a done():

gulp.task("watch", function() {
  gulp.watch("lib/*.js, "foobar");
});

gulp.task("foobar", function(done) {
  // This task pletion was omitted.
  done();
});

If I remember correctly gulp.run is deprecated in Gulp version 3.5. Try to replace gulp.run(); with gulp.start(); and see if that works.