The streaming build system

What is gulp?

• Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
• Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
• Strong Ecosystem - Use npm modules to do anything you want + over 3000 curated plugins for streaming file transformations.
• Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use.

Installation

Follow our Quick Start guide.

Roadmap

Find out about all our work-in-progress and outstanding issues at https://github.com/orgs/gulpjs/projects.

Documentation

Check out the Getting Started guide and API docs on our website!

Excuse our dust! All other docs will be behind until we get everything updated. Please open an issue if something isn't working.

Sample gulpfile.js

This file will give you a taste of what gulp does.

1var gulp = require('gulp');
2var less = require('gulp-less');
3var babel = require('gulp-babel');
4var concat = require('gulp-concat');
5var uglify = require('gulp-uglify');
6var rename = require('gulp-rename');
7var cleanCSS = require('gulp-clean-css');
8var del = require('del');
9
10var paths = {
11  styles: {
12    src: 'src/styles/**/*.less',
13    dest: 'assets/styles/'
14  },
15  scripts: {
16    src: 'src/scripts/**/*.js',
17    dest: 'assets/scripts/'
18  }
19};
20
21/* Not all tasks need to use streams, a gulpfile is just another node program
22 * and you can use all packages available on npm, but it must return either a
23 * Promise, a Stream or take a callback and call it
24 */
25function clean() {
26  // You can use multiple globbing patterns as you would with `gulp.src`,
27  // for example if you are using del 2.0 or above, return its promise
28  return del([ 'assets' ]);
29}
30
31/*
32 * Define our tasks using plain functions
33 */
34function styles() {
35  return gulp.src(paths.styles.src)
36    .pipe(less())
37    .pipe(cleanCSS())
38    // pass in options to the stream
39    .pipe(rename({
40      basename: 'main',
41      suffix: '.min'
42    }))
43    .pipe(gulp.dest(paths.styles.dest));
44}
45
46function scripts() {
47  return gulp.src(paths.scripts.src, { sourcemaps: true })
48    .pipe(babel())
49    .pipe(uglify())
50    .pipe(concat('main.min.js'))
51    .pipe(gulp.dest(paths.scripts.dest));
52}
53
54function watch() {
55  gulp.watch(paths.scripts.src, scripts);
56  gulp.watch(paths.styles.src, styles);
57}
58
59/*
60 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
61 */
62var build = gulp.series(clean, gulp.parallel(styles, scripts));
63
64/*
65 * You can use CommonJS `exports` module notation to declare tasks
66 */
67exports.clean = clean;
68exports.styles = styles;
69exports.scripts = scripts;
70exports.watch = watch;
71exports.build = build;
72/*
73 * Define default task that can be called by just running `gulp` from cli
74 */
75exports.default = build;

Use latest JavaScript version in your gulpfile

Gulp provides a wrapper that will be loaded in your ESM code, so you can name your gulpfile as gulpfile.mjs or with "type": "module" specified in your package.json file.

And here's the same sample from above written in ESNext.

1import { src, dest, watch } from 'gulp';
2import less from 'gulp-less';
3import babel from 'gulp-babel';
4import concat from 'gulp-concat';
5import uglify from 'gulp-uglify';
6import rename from 'gulp-rename';
7import cleanCSS from 'gulp-clean-css';
8import del from 'del';
9
10const paths = {
11  styles: {
12    src: 'src/styles/**/*.less',
13    dest: 'assets/styles/'
14  },
15  scripts: {
16    src: 'src/scripts/**/*.js',
17    dest: 'assets/scripts/'
18  }
19};
20
21/*
22 * For small tasks you can export arrow functions
23 */
24export const clean = () => del([ 'assets' ]);
25
26/*
27 * You can also declare named functions and export them as tasks
28 */
29export function styles() {
30  return src(paths.styles.src)
31    .pipe(less())
32    .pipe(cleanCSS())
33    // pass in options to the stream
34    .pipe(rename({
35      basename: 'main',
36      suffix: '.min'
37    }))
38    .pipe(dest(paths.styles.dest));
39}
40
41export function scripts() {
42  return src(paths.scripts.src, { sourcemaps: true })
43    .pipe(babel())
44    .pipe(uglify())
45    .pipe(concat('main.min.js'))
46    .pipe(dest(paths.scripts.dest));
47}
48
49 /*
50  * You could even use `export as` to rename exported tasks
51  */
52function watchFiles() {
53  watch(paths.scripts.src, scripts);
54  watch(paths.styles.src, styles);
55}
56export { watchFiles as watch };
57
58const build = gulp.series(clean, gulp.parallel(styles, scripts));
59/*
60 * Export a default task
61 */
62export default build;

Incremental Builds

You can filter out unchanged files between runs of a task using the gulp.src function's since option and gulp.lastRun:

1const paths = {
2  ...
3  images: {
4    src: 'src/images/**/*.{jpg,jpeg,png}',
5    dest: 'build/img/'
6  }
7}
8
9function images() {
10  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
11    .pipe(imagemin())
12    .pipe(gulp.dest(paths.images.dest));
13}
14
15function watch() {
16  gulp.watch(paths.images.src, images);
17}

Task run times are saved in memory and are lost when gulp exits. It will only save time during the watch task when running the images task for a second time.

Want to contribute?

Anyone can help make this project better - check out our Contributing guide!