Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 21b6962

Browse filesBrowse files
janiceilenephated
authored andcommitted
Docs: Add "Creating Tasks" documentation
1 parent 6a0fa00 commit 21b6962
Copy full SHA for 21b6962

File tree

Expand file treeCollapse file tree

1 file changed

+191
-0
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

1 file changed

+191
-0
lines changed
Open diff view settings
Collapse file
+191Lines changed: 191 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.