gulp-rev not working with gulp-watch

Question

Below is my code My main issue I have to watch changes of js and css and also based on that generate min file with proper version also my output directory is same that is also one case.

'use strict';

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
let cleanCSS = require('gulp-clean-css');
var rev = require('gulp-rev');
var jsArr = [
    'search/media/src/js/*.js',
    //'common/media/js/*.js',
    '!search/media/src/js/*.testmin.js',
    '!search/media/src/js/*.min.js'
            // '!common/media/js/*.testmin.js',
];

var cssArr = [
    'search/media/css/*.css',
    '!search/media/css/*.testmin.css',
    '!search/media/css/*.min.css'
];


gulp.task('js', function () {
    //return gulp.src(jsArr, {base: './'})
    return gulp.src(jsArr)
            .pipe(watch(jsArr))
            .pipe(uglify())
            .pipe(rename({suffix: '.testmin'}))
            .pipe(rev())
            .pipe(gulp.dest(function (file) {
                return file.base;
            }))
            .pipe(rev.manifest({
                merge: true
            }))
            .pipe(gulp.dest('./'));
});

gulp.task('css', function () {
    //return gulp.src(cssArr, {base: './'})
    return gulp.src(cssArr)
            .pipe(watch(cssArr))
            .pipe(cleanCSS())
            .pipe(rename({suffix: '.testmin'}))
            .pipe(rev())
            .pipe(gulp.dest(function (file) {
                return file.base;
            }))
            .pipe(rev.manifest({
                merge: true
            }))
            .pipe(gulp.dest('./'));
});

gulp.task('default', ['js', 'css'], function () {
});

var watcher = gulp.watch([jsArr, cssArr], ['default']);
watcher.on('change', function (event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

Thanks for the help.

Answer 1

I did a little testing and was able to get gulp-watch working by wrapping watcher.on('change)` within a gulp task. It would have to be within a gulp task in order to call it.

gulp.task( 'watch', function () {

    var watcher = gulp.watch( [jsArr, cssArr], ['default'] );

    watcher.on('change', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

});

You could also set it up this way, if you'd like. This will watch the js and css tasks separate from one another.

gulp.task( 'watch', function () {
    gulp.watch( jsArr, ['js'] );
    gulp.watch( cssArr, ['css'] );
});

Also, you'll want to remove pipe(watch(jsArr)) and pipe(watch(cssArr)). I'm not actually sure if gulp-watch can be used this way, as I have never used it this way, but when running gulp watch it would cause the task to hang and not complete.

To start gulp watch, run gulp watch in your terminal.