CODEWITHSUNDEEP
javascriptgulpgulp-watch
bluedevil2k
bluedevil2k

Reputation: 9491

Gulp watch() not triggering the less process

The following gulp watch task isn't getting triggered when I change any LESS file in the project. Can anyone spot what I'm doing wrong? Most the answers here say to NOT use the watch-less module, which I'm not. It's supposed to listen to changes in any LESS file in the project and when one changes, go to the app.less file to regenerate the CSS file (app.less has @includes to all the files).

var watch = require("gulp-watch");
var less = require("gulp-less");

gulp.watch(paths.source + "**/*.less", function(event){
        gulp.src(paths.source + paths.assets + paths.less + "app.less")
            .pipe(less().on("error", console.log))
            .pipe(gulp.dest(paths.dev + paths.css));
    });

Upvotes: 0

Views: 129

Answers (1)

Wentao Liu
Wentao Liu

Reputation: 71

Here are some issues:

  1. require("gulp-watch"); is useless here. Actually gulp.watch is a core API of gulp.

  2. The gulpfile.js consists of several gulp tasks.

  3. Run gulp watch in your terminal.

For example: 

var gulp = require('gulp');
var path = require('path');
var less = require('gulp-less');

var paths = {
  // your paths
};

gulp.task('styles', function () {
  return gulp.src(paths.source + paths.assets + paths.less + "app.less")
    .pipe(less({
      // paths to be used for @import directives
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('watch', function() {
  gulp.watch('less/**/*.less', ['styles']);
});

Upvotes: 1

Related Questions