Moving to Gulp 4.0

Gulp 4.0 is here and it brings with it welcome additions (and a couple of breaking changes). If you aren't in the know,

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

The biggest changes have to do with the way tasks are run. Previously, if you wanted to have a bunch of tasks run together, you would have to write something like:

gulp.task('build', ['one', 'two', 'three']);

This would make sure tasks one, two and three ran together. But they would run in parallel, and there was nothing you could do about that.

Enter Gulp 4.0. With the new gulp.series and gulp.parallel APIs, you have fine-grained control over the way you run your tasks. If you wanted the tasks in the above example to run one after the other, you would do it like so:

gulp.task('build', gulp.series('one', 'two', 'three'));

Running them in parallel would entail a similar operation:

gulp.task('build', gulp.parallel('one', 'two', 'three'));

It's really that simple. Needless to say, the array argument has been deprecated from the gulp.tasks API.

//gulp.task('build', ['some', 'tasks']);

gulp.task('build', gulp.parallel('some', 'tasks'));

Another really cool addition is gulp.tree. This fetches a tree of registered tasks and, if the deep option is set to true, renders an archy compatible tree.

//Your tasks

gulp.task('someTask', function(doStuff) {
    doStuff();
});

gulp.task('criticalTask', function(doStuff) {
    doStuff();
});

gulp.task('someImportantTask', function(doStuff) {
    doStuff();
});

gulp.task('anotherTask',
    gulp.series('someImportantTask', 
        gulp.parallel('criticalTask, function(doStuff) {
            doStuff();
        })
    )
);

Your tree would look like this

gulp.tree(); 

//tree: ['someTask', 'criticalTask', 'someImportantTask', 'anotherTask']

You could also have it like this

gulp.tree( {deep: true} );

/*tree:[
   {
      "label":"someTask",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"criticalTask",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"someImportantTask",
      "type":"task",
      "nodes":[]
   },
   {
      "label":"anotherTask",
      "type":"task",
      "nodes":[
         {
            "label":"<series>",
            "type":"function",
            "nodes":[
               {
                  "label":"someImportantTask",
                  "type":"task",
                  "nodes":[]
               },
               {
                  "label":"<parallel>",
                  "type":"function",
                  "nodes":[
                     {
                        "label":"criticalTask",
                        "type":"task",
                        "nodes":[]
                     },
                     {
                        "label":"<anonymous>",
                        "type":"function",
                        "nodes":[]
                     }
                  ]
               }
            ]
         }
      ]
   }
]
*/

And that's the good stuff. There are other features that aren't mentioned here. You can find the full list in the changelog.

Gulp is great for working with files. If, however, you find your project relying more on javascript's module system, you may want to take a look at transitioning to webpack.