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.
What's new in 4.0?!
The task system was rewritten from the ground-up, allowing task composition using series() and parallel() methods.
The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system.
First-class support was added for incremental builds using lastRun().
A symlink() method was exposed to create symlinks instead of copying files.
Built-in support for sourcemaps was added - the gulp-sourcemaps plugin is no longer necessary!
Task registration of exported functions - using node or ES exports - is now recommended.
Custom registries were designed, allowing for shared tasks or augmented functionality.
Stream implementations were improved, allowing for better conditional and phased builds.
gulp for enterprise
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.
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.
vargulp=require('gulp');varless=require('gulp-less');varbabel=require('gulp-babel');varconcat=require('gulp-concat');varuglify=require('gulp-uglify');varrename=require('gulp-rename');varcleanCSS=require('gulp-clean-css');vardel=require('del');varpaths={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 * and you can use all packages available on npm, but it must return either a * Promise, a Stream or take a callback and call it */functionclean(){// You can use multiple globbing patterns as you would with `gulp.src`,// for example if you are using del 2.0 or above, return its promisereturndel(['assets']);}/* * Define our tasks using plain functions */functionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS())// pass in options to the stream.pipe(rename({basename: 'main',suffix: '.min'})).pipe(gulp.dest(paths.styles.dest));}functionscripts(){returngulp.src(paths.scripts.src,{sourcemaps: true}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatch(){gulp.watch(paths.scripts.src,scripts);gulp.watch(paths.styles.src,styles);}/* * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel` */varbuild=gulp.series(clean,gulp.parallel(styles,scripts));/* * You can use CommonJS `exports` module notation to declare tasks */exports.clean=clean;exports.styles=styles;exports.scripts=scripts;exports.watch=watch;exports.build=build;/* * Define default task that can be called by just running `gulp` from cli */exports.default=build;
Use latest JavaScript version in your gulpfile
Most new versions of node support most features that Babel provides, except the import/export syntax. 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.js to gulpfile.babel.js.
Then create a .babelrc file with the preset configuration.
{"presets": ["@babel/preset-env"]}
And here's the same sample from above written in ES2015+.
importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={styles: {src: 'src/styles/**/*.less',dest: 'assets/styles/'},scripts: {src: 'src/scripts/**/*.js',dest: 'assets/scripts/'}};/* * For small tasks you can export arrow functions */exportconstclean=()=>del(['assets']);/* * You can also declare named functions and export them as tasks */exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS())// pass in options to the stream.pipe(rename({basename: 'main',suffix: '.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{sourcemaps: true}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}/* * You could even use `export as` to rename exported tasks */functionwatchFiles(){gulp.watch(paths.scripts.src,scripts);gulp.watch(paths.styles.src,styles);}export{watchFilesaswatch};constbuild=gulp.series(clean,gulp.parallel(styles,scripts));/* * Export a default task */exportdefaultbuild;
Incremental Builds
You can filter out unchanged files between runs of a task using
the gulp.src function's since option and gulp.lastRun:
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!
Backers
Support us with a monthly donation and help us continue our activities.
Sponsors
Become a sponsor to get your logo on our README on Github.
请发表评论