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]

Answer 1

Or you can do like this:

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

Answer 2

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.

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();
});

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.

Answer 5

gulp 4

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

I Like gulp4 !

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.

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.

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('...'));
});

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.

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