Search code examples
gulpgulp-watch

Gulp watch all LESS files in root


looking to watch all the less files in the root gulp project directory and then compile only the saved LESS file. I can't get past the first part.

When I run $ gulp watch in the project directory it hangs. Starts the task and never finishes.

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

gulp.task('compileCurrentTheme', function () {
 return gulp.src('./*.less')
 .pipe(less({
  compress: true
 }))
 .pipe(gulp.dest('./'));
});

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

Solution

  • You made some mistake

    gulp.task('compileCurrentTheme', function () {
      return gulp.src('./*.less') // ./ -> root directory
        .pipe(less())
        .pipe(gulp.dest('yourPath')); // you can also type ./ it will create .css files in your root directory
    });
    
    // Gulp watch functions
    gulp.task('watch:less', function(){
      gulp.watch('./*.less', ['compileCurrentTheme']); 
    });
    

    Rename your watch task to watch:less and then run it from your console gulp watch:less

    Please look at gulp-less and gulp especially gulp-watch just to make your understanding a bit clearly.

    I hope it will help you

    Thanks