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(\         


        

Answer 1

gulp 4

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

I Like gulp4 !

Answer 2

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 3

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

Answer 4

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 5

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 6

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.