gulp.run is deprecated. How do I compose tasks?

Question

Here is a composed task I don't know how to replace it with task dependencies.

...
gulp.task('watch', function () {
 var server = function(){
  gulp.run('jasmine');
  gulp.run('embed');
 };
 var client = function(){
  gulp.run('scripts');
  gulp.run('styles');
  gulp.run('copy');
  gulp.run('lint');
 };
 gulp.watch('app/*.js', server);
 gulp.watch('spec/nodejs/*.js', server);
 gulp.watch('app/backend/*.js', server);
 gulp.watch('src/admin/*.js', client);
 gulp.watch('src/admin/*.css', client);
 gulp.watch('src/geojson-index.json', function(){
  gulp.run('copygeojson');
 });
});

The corresponding changelog https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md#35 [deprecate gulp.run]

Sikata

Answer 1

gulp.task('watch', function () {
  var server = ['jasmine', 'embed'];
  var client = ['scripts', 'styles', 'copy', 'lint'];
  gulp.watch('app/*.js', server);
  gulp.watch('spec/nodejs/*.js', server);
  gulp.watch('app/backend/*.js', server);
  gulp.watch('src/admin/*.js', client);
  gulp.watch('src/admin/*.css', client);
  gulp.watch('src/geojson-index.json', ['copygeojson']);
});

You no longer need to pass a function (though you still can) to run tasks. You can give watch an array of task names and it will do this for you.

Goldagoldarina

What if I want to run some task before I begin watching? E.g. I want to watch scripts, but it also makes sense to force run this task right away (without waiting until some script file changes). – Diencephalon

And is there any way to pass arguments to those tasks? – Pucka

@Monsingor you can have an event listener on the watcher, like so: gulp.watch('app/*.js', ['task']).on('change', function(e) { console.log(e); }); Take a look at the docs. – Vagrancy

@Vagrancy irrelevant to the question Monsingor asked. – Ligni

@Monsingor To achieve that, you can define a new task that executes a list of tasks. For example, I usually define the following default task gulp.task('default', ['build', 'watch']);, which first builds and then starts watching. – Convey

@BastiaanvandenBerg I thought gulp tasks were designed to run in parallel? So even though you are listing build first, it doesn't have to finish before the watch task fires. I am getting from the OP that they want to ensure build has finished before watch begins. – Rosecan

@Monsingor: See my answer below for a task that runs before watching begins, then is not watched. – Larcenous

Then why do I get this error with gulp v4.0.0? Error: watching /*.ts,!node_modules/**/*: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) **Task has to be a function – Regenerate

Answer 2

Or you can do like this:

gulp.start('task1', 'task2');

Chanellechaney

Is this safe to use? I do not see it mentioned in the API docs (link). – Sensibility

.start is an Orchestrator method. Since Gulp inherits from that, it should work. I'm triggering a gulp task from a non-gulp function (watchify) and this appears to be working. – Nidifugous

gulp.start will removed in the next release: github.com/gulpjs/gulp/issues/505#issuecomment-45379280 – Blok

@Blok so what do we use to execute a task? – Juliettajuliette

No, this is not safe to use! It's not in the api for a reason, it's only available in the Gulp namespace as a side effect of inheritance. You just make normal JS functions. Then call them from on function wrapped in a task. It's very simiple. github.com/gulpjs/gulp/issues/458#issuecomment-62057370 – Woodprint

Revisting this, most uses of gulp-start can be replaced with run-sequence npmjs.com/package/run-sequence – Nidifugous

@Juliettajuliette That's simple. You just put it in another task. I am doing this. XD – Weaverbird

I hope they leave this in. It doesn't feel like a hack is simple and elegant to use. – Eichmann

Answer 3

source: https://github.com/gulpjs/gulp/issues/755

gulp.start() was never meant to be a public api nor used. And as stated above in comments, the task management is being replaced in the next release....so gulp.start() will be breaking.

The true intention of the gulp design is to make regular Javascript functions, and only make the task for calling them.

Example:

function getJsFiles() {
    var sourcePaths = [
        './app/scripts/**/*.js',
        '!./app/scripts/**/*.spec.js',
        '!./app/scripts/app.js'
    ];

    var sources = gulp.src(sourcePaths, { read: false }).pipe(angularFilesort());

    return gulp.src('./app/index.html')
        .pipe(injector(sources, { ignorePath: 'app', addRootSlash: false }))
        .pipe(gulp.dest('./app'));
}  

---

gulp.task('js', function () {
    jsStream = getJsFiles();
});

Woodprint

Answer 4

Forgive me for resurrecting an old question. The accepted answer does not address the issue of running tasks before setting the watches. The next answer uses gulp.start which is going away. The third answer points out that regular functions should be used but the example seems strange. I did some searching but did not find a simple example.

Here is my solution. The idea is to define regular js functions then register them as tasks. The functions can then be called directly if needed or from within a watch.

var 
  gulp     = require('gulp'),
  concat   = require('gulp-concat'),
  markdown = require('gulp-showdown')
;
var scriptFiles   = [ 'ang/app.js' ];
var markdownFiles = [ 'content/articles/*.md'];

var watchTask = function() 
{
  buildTask();

  gulp.watch(scriptFiles,  ['scripts' ]);
  gulp.watch(markdownFiles,['markdown']);
};
gulp.task('watch',watchTask);

var buildTask = function()
{
  scriptsTask();
  markdownTask();
};
gulp.task('build',buildTask);

var markdownTask = function() 
{
  gulp.src(markdownFiles)
    .pipe(markdown())
    .pipe(gulp.dest('web/articles'));
};
gulp.task('markdown',markdownTask);

var scriptsTask = function() 
{
  gulp.src(scriptFiles)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('web/js'));

  gulp.src(
    [
      'bower_components/angular/angular.min.js',
      'bower_components/angular-route/angular-route.min.js'
    ])
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('web/js'));

  gulp.src(
    [
      'bower_components/angular/angular.min.js.map',
      'bower_components/angular-route/angular-route.min.js.map'
    ])
    .pipe(gulp.dest('web/js'));
};
gulp.task('scripts', scriptsTask);

I am new to gulp. Please let me know if I have overlooked something obvious.

Prendergast

This also makes it easier to create "build" tasks and "rebuild" tasks, where both call the function that does the work but the latter depends on the "clean" task, too. – Cyndicyndia

Doesn't this also have the same problem as a normal gulp task, in that the JS will move on to the gulp.watch tasks defined in watchTask() before buildTask() is confirmed complete? I feel like this still is a race condition, and does not guarantee build before watch. – Rosecan

Answer 5

gulp 4

gulp.parallel('taskName1', 'taskName2')()
gulp.series('taskName1', 'taskName2')()

I Like gulp4 !

Marlea

The best answer after searching a lot. Thanks. – Toadeater

Answer 6

As @dman mentions that, gulp.start will be discarded in the next version. Also it can be seen in this issue of gulp.

And in the comments of the answer of @Pavel Evstigneev, @joemaller mentions that we can use run-sequence in this scenario.

But please note that, the author of run-sequence says :

This is intended to be a temporary solution until the release of gulp 4.0 which has support for defining task dependencies in series or in parallel.

Be aware that this solution is a hack, and may stop working with a future update to gulp.

So, before gulp 4.0, we can use run-sequence, after 4.0, we can just use gulp.

Baughman

Answer 7

If you need to maintain the order of running tasks you can define dependencies as described here - you just need to return stream from the dependency:

gulp.task('dependency', function () {
  return gulp.src('glob')
    .pipe(plumber())
    .pipe(otherPlugin())
    .pipe(gulp.dest('destination'));
});

Define the task that depends on it:

gulp.task('depends', [ 'dependency' ], function () {
  // do work
});

And use it from watch:

gulp.task('watch', function () {
  watch('glob', [ 'depends' ]);
});

Now the dependecy task will complete before depends runs (for example your 'jasmine' and 'embed' tasks would be dependencies and you'd have another task 'server' that would depend on them). No need for any hacks.

Withershins

I'm not sure if it's not off-topic, because it only answers questions from comments that should be separate questions – Withershins

Answer 8

In Gulp 4 the only thing that seems to be working for me is:

gulp.task('watch', function() {
    gulp.watch(['my-files/**/*'], gulp.series('my-func'));
});

gulp.task('my-func', function() {
    return gulp.src('[...]').pipe(gulp.dest('...'));
});

Ingaborg

Answer 9

To run a task before starting to watch, instead of using gulp.run() or gulp.start() just run the gulp command straight up.

So instead of:

var compress = function () {
    return gulp.src('js/vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('./build/js/'));
};

Just do:

gulp.src('js/vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('./build/js/'));

Or you can wrap that latter code in a "normal" function and call it whenever you want.

-- Inspired by this answer from a similar thread.

Larcenous

Answer 10

I still dont see how this actually solves the question at hand.

If i have 4 tasks with dependencies defined between them

A,B,C,D

where A depends on B, etc as defined by gulp.task('A',['B'],function A(){}); and then i defined a new task using gulp.watch running just the functions would duplicate the dependencies.

e.g given these tasks (each tasks function exposed via name):

function A(){}
gulp.task('A',['B'],A);

function A(){}
gulp.task('A',['B'],A);

function B(){}
gulp.task('B',['C'],B);

function C(){}
gulp.task('C',['D'],C);

function D(){}
gulp.task('D',[],D);

i can write 1)

gulp.task('WATCHER', ['A'], function(){
   ...
}

which would execute A->D but if e.g Step B fails it would never enter the task (think of compile or test error)

or i can write 2)

gulp.task('WATCHER', [], function(){
   gulp.watch(...,['A'])
}

which would not run A->D until something was changed first.

or i can write 3)

gulp.task('WATCHER', [], function(){
   D();
   C();
   B();
   A();
   gulp.watch(...,['A'])
}

which would cause duplication (and errors over time) of the dependency hierarchy.

PS: In case someone is wondering why i would want my watch task to execute if any of the dependent tasks fail that is usually because i use watch for live development. eg. i start my watch task to begin working on tests etc. and it can be that the initial code i start out with already has issues thus errors.

So i would hope that gulp run or some equivalent stays for some time

Isham

Which existing answer is this rebuttal aimed at? – Marsiella