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!
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:
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!
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With