Creating Tasks

Each gulp task is an asynchronous JavaScript function - a function that accepts an error-first callback or returns a stream, promise, event emitter, child process, or observable (more on that later). Due to some platform limitations, synchronous tasks aren’t supported, though there is a pretty nifty alternative.

Exporting

Tasks can be considered public or private.

• Public tasks are exported from your gulpfile, which allows them to be run by the gulp command.
• Private tasks are made to be used internally, usually used as part of series() or parallel() composition.

A private task looks and acts like any other task, but an end-user can’t ever execute it independently. To register a task publicly, export it from your gulpfile.

1. const { series } = require('gulp');

3. // The `clean` function is not exported so it can be considered a private task.
4. // It can still be used within the `series()` composition.
5. function clean(cb) {
6. // body omitted
7. cb();
8. }

10. // The `build` function is exported so it is public and can be run with the `gulp` command.
11. // It can also be used within the `series()` composition.
12. function build(cb) {
13. // body omitted
14. cb();
15. }

17. exports.build = build;
18. exports.default = series(clean, build);

In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won’t work.

Compose tasks

Gulp provides two powerful composition methods, series() and parallel(), allowing individual tasks to be composed into larger operations. Both methods accept any number of task functions or composed operations. series() and parallel() can be nested within themselves or each other to any depth.

To have your tasks execute in order, use the series() method.

1. const { series } = require('gulp');

3. function transpile(cb) {
4. // body omitted
5. cb();
6. }

8. function bundle(cb) {
9. // body omitted
10. cb();
11. }

13. exports.build = series(transpile, bundle);

For tasks to run at maximum concurrency, combine them with the parallel() method.

1. const { parallel } = require('gulp');

3. function javascript(cb) {
4. // body omitted
5. cb();
6. }

8. function css(cb) {
9. // body omitted
10. cb();
11. }

13. exports.build = parallel(javascript, css);

Tasks are composed immediately when either series() or parallel() is called. This allows variation in the composition instead of conditional behavior inside individual tasks.

1. const { series } = require('gulp');

3. function minify(cb) {
4. // body omitted
5. cb();
6. }

9. function transpile(cb) {
10. // body omitted
11. cb();
12. }

14. function livereload(cb) {
15. // body omitted
16. cb();
17. }

19. if (process.env.NODE_ENV === 'production') {
20. exports.build = series(transpile, minify);
21. } else {
22. exports.build = series(transpile, livereload);
23. }

series() and parallel() can be nested to any arbitrary depth.

1. const { series, parallel } = require('gulp');

3. function clean(cb) {
4. // body omitted
5. cb();
6. }

8. function cssTranspile(cb) {
9. // body omitted
10. cb();
11. }

13. function cssMinify(cb) {
14. // body omitted
15. cb();
16. }

18. function jsTranspile(cb) {
19. // body omitted
20. cb();
21. }

23. function jsBundle(cb) {
24. // body omitted
25. cb();
26. }

28. function jsMinify(cb) {
29. // body omitted
30. cb();
31. }

33. function publish(cb) {
34. // body omitted
35. cb();
36. }

38. exports.build = series(
39. clean,
40. parallel(
41. cssTranspile,
42. series(jsTranspile, jsBundle)
43. ),
44. parallel(cssMinify, jsMinify),
45. publish
46. );

When a composed operation is run, each task will be executed every time it was referenced. For example, a clean task referenced before two different tasks would be run twice and lead to undesired results. Instead, refactor the clean task to be specified in the final composition.

If you have code like this:

1. // This is INCORRECT
2. const { series, parallel } = require('gulp');

4. const clean = function(cb) {
5. // body omitted
6. cb();
7. };

9. const css = series(clean, function(cb) {
10. // body omitted
11. cb();
12. });

14. const javascript = series(clean, function(cb) {
15. // body omitted
16. cb();
17. });

19. exports.build = parallel(css, javascript);

Migrate to this:

1. const { series, parallel } = require('gulp');

3. function clean(cb) {
4. // body omitted
5. cb();
6. }

8. function css(cb) {
9. // body omitted
10. cb();
11. }

13. function javascript(cb) {
14. // body omitted
15. cb();
16. }

18. exports.build = series(clean, parallel(css, javascript));