|
| 1 | +<!-- front-matter |
| 2 | +id: creating-tasks |
| 3 | +title: Creating Tasks |
| 4 | +hide_title: true |
| 5 | +sidebar_label: Creating Tasks |
| 6 | +--> |
| 7 | + |
| 8 | +# Creating Tasks |
| 9 | + |
| 10 | +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][async-completion-docs]). Due to some platform limitations, synchronous tasks aren't supported, though there is a pretty nifty [alternative][using-async-await-docs]. |
| 11 | + |
| 12 | +## Exporting |
| 13 | + |
| 14 | +Tasks can be considered **public** or **private**. |
| 15 | + |
| 16 | +* **Public tasks** are exported from your gulpfile, which allows them to be run by the `gulp` command. |
| 17 | +* **Private tasks** are made to be used internally, usually used as part of `series()` or `parallel()` composition. |
| 18 | + |
| 19 | +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. |
| 20 | + |
| 21 | +```js |
| 22 | +const { series } = require('gulp'); |
| 23 | + |
| 24 | +// The `clean` function is not exported so it can be considered a private task. |
| 25 | +// It can still be used within the `series()` composition. |
| 26 | +function clean(cb) { |
| 27 | + // body omitted |
| 28 | + cb(); |
| 29 | +} |
| 30 | + |
| 31 | +// The `build` function is exported so it is public and can be run with the `gulp` command. |
| 32 | +// It can also be used within the `series()` composition. |
| 33 | +function build(cb) { |
| 34 | + // body omitted |
| 35 | + cb(); |
| 36 | +} |
| 37 | + |
| 38 | +exports.build = build; |
| 39 | +exports.default = series(clean, build); |
| 40 | +``` |
| 41 | + |
| 42 | +![ALT TEXT MISSING][img-gulp-tasks-command] |
| 43 | + |
| 44 | +<small>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.</small> |
| 45 | + |
| 46 | +## Compose tasks |
| 47 | + |
| 48 | +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. |
| 49 | + |
| 50 | +To have your tasks execute in order, use the `series()` method. |
| 51 | +```js |
| 52 | +const { series } = require('gulp'); |
| 53 | + |
| 54 | +function transpile(cb) { |
| 55 | + // body omitted |
| 56 | + cb(); |
| 57 | +} |
| 58 | + |
| 59 | +function bundle(cb) { |
| 60 | + // body omitted |
| 61 | + cb(); |
| 62 | +} |
| 63 | + |
| 64 | +exports.build = series(transpile, bundle); |
| 65 | +``` |
| 66 | + |
| 67 | +For tasks to run at maximum concurrency, combine them with the `parallel()` method. |
| 68 | +```js |
| 69 | +const { parallel } = require('gulp'); |
| 70 | + |
| 71 | +function javascript(cb) { |
| 72 | + // body omitted |
| 73 | + cb(); |
| 74 | +} |
| 75 | + |
| 76 | +function css(cb) { |
| 77 | + // body omitted |
| 78 | + cb(); |
| 79 | +} |
| 80 | + |
| 81 | +exports.build = parallel(javascript, css); |
| 82 | +``` |
| 83 | + |
| 84 | +Tasks are composed immediately when either `series()` or `parallel()` is called. This allows variation in the composition instead of conditional behavior inside individual tasks. |
| 85 | + |
| 86 | +```js |
| 87 | +const { series } = require('gulp'); |
| 88 | + |
| 89 | +function minify(cb) { |
| 90 | + // body omitted |
| 91 | + cb(); |
| 92 | +} |
| 93 | + |
| 94 | + |
| 95 | +function transpile(cb) { |
| 96 | + // body omitted |
| 97 | + cb(); |
| 98 | +} |
| 99 | + |
| 100 | +function livereload(cb) { |
| 101 | + // body omitted |
| 102 | + cb(); |
| 103 | +} |
| 104 | + |
| 105 | +if (process.env.NODE_ENV === 'production') { |
| 106 | + exports.build = series(transpile, minify); |
| 107 | +} else { |
| 108 | + exports.build = series(transpile, livereload); |
| 109 | +} |
| 110 | +``` |
| 111 | + |
| 112 | +`series()` and `parallel()` can be nested to any arbitrary depth. |
| 113 | + |
| 114 | +```js |
| 115 | +const { series, parallel } = require('gulp'); |
| 116 | + |
| 117 | +function clean(cb) { |
| 118 | + // body omitted |
| 119 | + cb(); |
| 120 | +} |
| 121 | + |
| 122 | +function cssTranspile(cb) { |
| 123 | + // body omitted |
| 124 | + cb(); |
| 125 | +} |
| 126 | + |
| 127 | +function cssMinify(cb) { |
| 128 | + // body omitted |
| 129 | + cb(); |
| 130 | +} |
| 131 | + |
| 132 | +function jsTranspile(cb) { |
| 133 | + // body omitted |
| 134 | + cb(); |
| 135 | +} |
| 136 | + |
| 137 | +function jsBundle(cb) { |
| 138 | + // body omitted |
| 139 | + cb(); |
| 140 | +} |
| 141 | + |
| 142 | +function jsMinify(cb) { |
| 143 | + // body omitted |
| 144 | + cb(); |
| 145 | +} |
| 146 | + |
| 147 | +function publish(cb) { |
| 148 | + // body omitted |
| 149 | + cb(); |
| 150 | +} |
| 151 | + |
| 152 | +exports.build = series( |
| 153 | + clean, |
| 154 | + parallel( |
| 155 | + cssTranspile, |
| 156 | + series(jsTranspile, jsBundle) |
| 157 | + ), |
| 158 | + parallel(cssMinify, jsMinify), |
| 159 | + publish |
| 160 | +); |
| 161 | +``` |
| 162 | + |
| 163 | +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. Tasks can be wrapped with the [async-once][async-once] module if this **(not recommended)** pattern is needed. |
| 164 | + |
| 165 | +```js |
| 166 | +// This pattern is NOT recommended but some edge cases might require it. |
| 167 | +const { series } = require('gulp'); |
| 168 | +const once = require('async-once'); |
| 169 | + |
| 170 | +const clean = once(function(cb) { |
| 171 | + // body omitted |
| 172 | + cb(); |
| 173 | +}); |
| 174 | + |
| 175 | +const css = series(clean, function(cb) { |
| 176 | + // body omitted |
| 177 | + cb(); |
| 178 | +}); |
| 179 | + |
| 180 | +const javascript = series(clean, function(cb) { |
| 181 | + // body omitted |
| 182 | + cb(); |
| 183 | +}) |
| 184 | + |
| 185 | +exports.build = series(css, javascript); |
| 186 | +``` |
| 187 | + |
| 188 | +[async-completion-docs]: 4-async-completion.md |
| 189 | +[using-async-await-docs]: 4-async-completion.md#using-asyncawait |
| 190 | +[img-gulp-tasks-command]: https://gulpjs.com/img/docs-gulp-tasks-command.png |
| 191 | +[async-once]: https://github.com/gulpjs/async-once |
0 commit comments