A new package for gulpjs/gulp#4.0 (Make install easy).
Real version: 4.0.0-alpha.2
gulp4
, only use in npm run
The new cli is: 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 2000 curated plugins for streaming file transformations
- Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use
Documentation
For a Getting started guide, API docs, recipes, making a plugin, etc. see the documentation page!
gulpfile.js
Sample This file is just a quick sample to give you a taste of what gulp does.
var gulp = ;var less = ;var babel = ;var concat = ;var uglify = ;var rename = ;var cleanCSS = ;var 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 * 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 */ { // 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 promise return ;} /* * Define our tasks using plain functions */ { return gulp // pass in options to the stream ;} { return gulp ;} { gulp; gulp;} /* * You can use CommonJS `exports` module notation to declare tasks */exportsclean = clean;exportsstyles = styles;exportsscripts = scripts;exportswatch = watch; /* * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel` */var build = gulp; /* * You can still use `gulp.task` to expose tasks */gulp; /* * Define default task that can be called by just running `gulp` from cli */gulp;
Use last JavaScript version in your gulpfile
Node already supports a lot of ES2015, to avoid compatibility problem we suggest to install Babel and rename your gulpfile.js
as gulpfile.babel.js
.
npm install --save-dev babel-register babel-preset-es2015
Then create a .babelrc file with the preset configuration.
"presets": "es2015"
And here's the same sample from above written in ES2015.
;;;;;;;; const paths = styles: src: 'src/styles/**/*.less' dest: 'assets/styles/' scripts: src: 'src/scripts/**/*.js' dest: 'assets/scripts/' ; /* * For small tasks you can use arrow functions and export */const clean = ;; /* * You can still declare named functions and export them as tasks */ { return gulp // pass in options to the stream ;} { return gulp ;} { gulp; gulp;} const build = gulp;; /* * Export a default task */;
Incremental Builds
You can filter out unchanged files between runs of a task using
the gulp.src
function's since
option and gulp.lastRun
:
const paths = ... images: src: 'src/images/**/*.{jpg,jpeg,png}' dest: 'build/img/' { return gulp ;} { gulp;}
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.
If you want to compare modification time between files instead, we recommend these plugins:
- gulp-changed;
- or gulp-newer - supports many:1 source:dest.
gulp-newer example:
{ var dest = 'build/img'; return gulp // pass through newer images only ;}
If you can't simply filter out unchanged files, but need them in a later phase of the stream, we recommend these plugins:
- gulp-cached - in-memory file cache, not for operation on sets of files
- gulp-remember - pairs nicely with gulp-cached
gulp-remember example:
{ return gulp // only pass through changed files // do special things to the changed files... // for example, // add a simple module wrap to each file // add back all files to the stream // do things that require all files }
Want to contribute?
Anyone can help make this project better - check out our Contributing guide!