Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

gulp.watch running only once on Windows

I'm just started to use Gulp to improve my workflow. I'm currently have a task called styles that compiles .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 complete' }) );
} )

(...)

// 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:

Node Command Prompt running gulp watch task

like image 337
Diego de Oliveira Avatar asked Dec 11 '22 08:12

Diego de Oliveira


2 Answers

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 compatibility with your OS.

Thanks for everybody that spent time trying to help me!

like image 186
Diego de Oliveira Avatar answered Dec 28 '22 20:12

Diego de Oliveira


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 completion was omitted.
  done();
});
like image 26
dthree Avatar answered Dec 28 '22 21:12

dthree