How to use gulp-watch?

Question

What is the proper way to use gulp-watch plugin?

...
var watch = require('gulp-watch');

function styles() {
  return gulp.src('app/styles/*.less')
    .pipe(watch('app/styles/*.less'))
    .pipe(concat('main.css'))
    .pipe(less())
    .pipe(gulp.dest('build'));
}

gulp.task('styles', styles);

I don't see any results when run gulp styles.

Yamamoto

Answer 1

gulp.task('less', function() {
  gulp.src('app/styles/*.less')
    .pipe(less())
    .pipe(gulp.dest('build'));
});


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

Ensile

this is not how you use the gulp-watch plugin – Goldwin

Answer 2

1. In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
2. Then type gulp watch and hit enter.

If your gulpfile.js is configured properly (see example below) than you will see output like this:

[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms

Every time you save your file you'll see new output here instantly.

Here is an example of a functional gulpfile.js:

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    watchLess = require('gulp-watch-less'),
    pug = require('gulp-pug'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-csso'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps');

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

gulp.task('html', function(){
    return gulp.src('source/html/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
return gulp.src('source/less/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

gulp.task('js', function(){
    return gulp.src('source/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'))
});

gulp.task('default', [ 'html', 'js', 'css', 'watch']);

Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.

Hoxie

Answer 3

Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.

This is working code I hope it helps the lurkers.

Then (for version 4+) you need to do something like this:

    
    var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
    var uglify = require('gulp-uglify'); // and here as well 
    
    gulp.task('scripts', function(done) {
      return gulp.src('./src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
    });
    
    gulp.task('watch', function() {
        gulp.watch('./src/js/*.js',gulp.series(['scripts']))
    });

** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))

Philippines