24

I've got some tasks already defined in gulpfile.js and I want to use gulp-watch plugin (to run tasks on new files). My question is, because I couldn't find anything, can I run my existing tasks while running watch (from plugin) function?

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

gulp.task('lint', function () {
  return gulp.src(path.scripts)
      .pipe(jshint())
      .pipe(jshint.reporter(stylish));
});

gulp.task('watch', function () {
  watch({ glob: 'app/**/*.js' }); // Run 'lint' task for those files
});

Because I don't want to include watch() task in every task I have. I would like to have only 1 task - watch, which will combine all "watches".

----- EDIT ---- (as I probably didn't quite get my point):

I need to run task from inside of gulp('watch') task. for example:

like I did it with gulp.watch:

gulp.task('watch', function () {
  gulp.watch('files', ['task1', 'task2']);
});

I need to do the same but with gulp-watch plugin, something like (I know it wouldn't work):

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

gulp.task('watch', function () {
  watch({ glob: 'files' }, ['task1', 'task2']);
});
Tomasz Kasperek
  • 1,147
  • 3
  • 13
  • 35

4 Answers4

24

I have also run into the problem of wanting to use gulp-watch (not gulp.watch), needing to use the callback form, and having trouble finding a suitable way to run a task in the callback.

My use case was that I wanted to watch all stylus files, but only process the main stylus file that includes all the others. Newer versions of gulp-watch may address this but I'm having problems with 4.3.x so I'm stuck on 4.2.5.

  • gulp.run is deprecated so I don't want to use that.
  • gulp.start works well, but is also advised against by the gulp author, contra.
  • The run-sequence plugin works well and lets you define a run order, but it is a self-proclaimed hack: https://www.npmjs.com/package/run-sequence
  • Contra suggest writing plain old functions and calling those. This is a new idea to me, but I think the example below captures the idea. https://github.com/gulpjs/gulp/issues/505

Take your pick.

var gulp = require('gulp'),
    watch = require('gulp-watch'), // not gulp.watch
    runSequence = require('run-sequence');

// plain old js function
var runStylus = function() {
    return gulp.src('index.styl')
        .pipe(...) // process single file
}

gulp.task('stylus', runStylus);

gulp.task('watch', function() {
    // watch many files
    watch('*.styl', function() {
        runSequence('stylus');
        OR 
        gulp.start('stylus');
        OR
        runStylus();
    });
});

All of these are working for me without warnings, but I'm still unsure about getting the "done" callback from the 4.2.x version of gulp-watch.

AgentOrange
  • 251
  • 2
  • 2
  • Wow, I've been running through gulp lately to get up to speed with some colleagues usage of it; your answer - although not accepted for this question - has answered about 4 other questions I had around `watch`, `run` & `run-sequence`, and to some degree usage of vanilla functions. So thanks for saving me a bunch of time :D – danjah Jun 15 '16 at 12:03
13

You will most likely want to run specific tasks related to the files you are watching - 

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

You can also use the ['lint'] portion to run any required tasks when watch first gets called, or utilize the tasks to run async with

gulp.task('default', ['lint','watch'])
Kelly J Andrews
  • 5,083
  • 1
  • 19
  • 32
  • Can you extend this to calling specific _tasks_ from within `gulp.watch` based on the _event type_. – Mudlabs Jun 28 '17 at 03:47
7

You can just call one task, that then includes both task

gulp.task('default', ['lint','watch'])

so here you would just call 'gulp'

Andrew C
  • 257
  • 4
  • 14
4
gulp.task('watch', function() {
  watch(files, function() {
    gulp.run(['task1', 'task2']);
  });
});

work fine, except a warning

gongqj
  • 762
  • 6
  • 14