Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
41
rated 0 times [  42] [ 1]  / answers: 1 / hits: 7802  / 11 Years ago, mon, january 27, 2014, 12:00:00

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


More From » node.js

 Answers
14

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!


[#48302] Monday, January 27, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
monetm

Total Points: 615
Total Questions: 103
Total Answers: 119

Location: Finland
Member since Fri, Oct 21, 2022
2 Years ago
monetm questions
Fri, Feb 26, 21, 00:00, 3 Years ago
Wed, Sep 9, 20, 00:00, 4 Years ago
Sun, Jul 26, 20, 00:00, 4 Years ago
Thu, Jun 11, 20, 00:00, 4 Years ago
;