Skip to content

Commit 21b6962

Browse files
janiceilenephated
authored andcommitted
Docs: Add "Creating Tasks" documentation
1 parent 6a0fa00 commit 21b6962

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed
+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
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

Comments
 (0)