A toolkit to automate & enhance your workflow
The streaming build system
series()and
parallel()methods.
lastRun().
symlink()method was exposed to create symlinks instead of copying files.
Available as part of the Tidelift Subscription
The maintainers of gulp and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.
Follow our Quick Start guide.
Find out about all our work-in-progress and outstanding issues at https://github.com/orgs/gulpjs/projects.
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.
gulpfile.js
This file will give you a taste of what gulp does.
var gulp = require('gulp'); var less = require('gulp-less'); var babel = require('gulp-babel'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var cleanCSS = require('gulp-clean-css'); var del = require('del');var paths = { styles: { src: 'src/styles/*/.less', dest: 'assets/styles/' }, scripts: { src: 'src/scripts/*/.js', dest: 'assets/scripts/' } };
/* Not all tasks need to use streams, a gulpfile is just another node program
gulp.src
,
// for example if you are using del 2.0 or above, return its promise
return del([ 'assets' ]);
}/*
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}function scripts() { return gulp.src(paths.scripts.src, { sourcemaps: true }) .pipe(babel()) .pipe(uglify()) .pipe(concat('main.min.js')) .pipe(gulp.dest(paths.scripts.dest)); }
function watch() { gulp.watch(paths.scripts.src, scripts); gulp.watch(paths.styles.src, styles); }
/*
gulp.series
and gulp.parallel
/*
exports
module notation to declare tasksgulp
from cliMost new versions of node support most features that Babel provides, except the
import/
exportsyntax. When only that syntax is desired, rename to
gulpfile.esm.js, install the esm module, and skip the Babel portion below.
Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your
gulpfile.jsto
gulpfile.babel.js.
npm install --save-dev @babel/register @babel/core @babel/preset-env
Then create a .babelrc file with the preset configuration.
{ "presets": [ "@babel/preset-env" ] }
And here's the same sample from above written in ES2015+.
import gulp from 'gulp'; import less from 'gulp-less'; import babel from 'gulp-babel'; import concat from 'gulp-concat'; import uglify from 'gulp-uglify'; import rename from 'gulp-rename'; import cleanCSS from 'gulp-clean-css'; import del from 'del';const paths = { styles: { src: 'src/styles/*/.less', dest: 'assets/styles/' }, scripts: { src: 'src/scripts/*/.js', dest: 'assets/scripts/' } };
/*
/*
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}export function scripts() { return gulp.src(paths.scripts.src, { sourcemaps: true }) .pipe(babel()) .pipe(uglify()) .pipe(concat('main.min.js')) .pipe(gulp.dest(paths.scripts.dest)); }
/*
export as
to rename exported tasksconst build = gulp.series(clean, gulp.parallel(styles, scripts)); /*
You can filter out unchanged files between runs of a task using the
gulp.srcfunction's
sinceoption and
gulp.lastRun: ```js const paths = { ... images: { src: 'src/images/*/.{jpg,jpeg,png}', dest: 'build/img/' } }
function images() { return gulp.src(paths.images.src, {since: gulp.lastRun(images)}) .pipe(imagemin()) .pipe(gulp.dest(paths.images.dest)); }
function watch() { gulp.watch(paths.images.src, images); } ``
Task run times are saved in memory and are lost when gulp exits. It will only save time during thewatch
task when running theimages` task for a second time.
Anyone can help make this project better - check out our Contributing guide!
Support us with a monthly donation and help us continue our activities.
Become a sponsor to get your logo on our README on Github.