![](\"https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png\")
\n \n \n \n \n \n
The streaming build system
\n\n\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Azure Pipelines Build Status][azure-pipelines-image]][azure-pipelines-url] [![Build Status][travis-image]][travis-url] [![AppVeyor Build Status][appveyor-image]][appveyor-url] [![Coveralls Status][coveralls-image]][coveralls-url] [![OpenCollective Backers][backer-badge]][backer-url] [![OpenCollective Sponsors][sponsor-badge]][sponsor-url] [![Gitter chat][gitter-image]][gitter-url]\n\n\n## What is gulp?\n\n- **Automation** - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.\n- **Platform-agnostic** - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.\n- **Strong Ecosystem** - Use npm modules to do anything you want + over 3000 curated plugins for streaming file transformations.\n- **Simple** - By providing only a minimal API surface, gulp is easy to learn and simple to use.\n\n## What's new in 4.0?!\n\n* The task system was rewritten from the ground-up, allowing task composition using `series()` and `parallel()` methods.\n* The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system.\n* First-class support was added for incremental builds using `lastRun()`.\n* A `symlink()` method was exposed to create symlinks instead of copying files.\n* Built-in support for sourcemaps was added - the gulp-sourcemaps plugin is no longer necessary!\n* Task registration of exported functions - using node or ES exports - is now recommended.\n* Custom registries were designed, allowing for shared tasks or augmented functionality.\n* Stream implementations were improved, allowing for better conditional and phased builds.\n\n\n## gulp for enterprise\n\nAvailable as part of the Tidelift Subscription\n\nThe 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.](https://tidelift.com/subscription/pkg/npm-gulp?utm_source=npm-gulp&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)\n\n\n## Installation\n\nFollow our [Quick Start guide][quick-start].\n\n## Roadmap\n\nFind out about all our work-in-progress and outstanding issues at https://github.com/orgs/gulpjs/projects.\n\n## Documentation\n\nCheck out the [Getting Started guide][getting-started-guide] and [API docs][api-docs] on our website!\n\n__Excuse our dust! All other docs will be behind until we get everything updated. Please open an issue if something isn't working.__\n\n## Sample `gulpfile.js`\n\nThis file will give you a taste of what gulp does.\n\n```js\nvar gulp = require('gulp');\nvar less = require('gulp-less');\nvar babel = require('gulp-babel');\nvar concat = require('gulp-concat');\nvar uglify = require('gulp-uglify');\nvar rename = require('gulp-rename');\nvar cleanCSS = require('gulp-clean-css');\nvar del = require('del');\n\nvar paths = {\n styles: {\n src: 'src/styles/**/*.less',\n dest: 'assets/styles/'\n },\n scripts: {\n src: 'src/scripts/**/*.js',\n dest: 'assets/scripts/'\n }\n};\n\n/* Not all tasks need to use streams, a gulpfile is just another node program\n * and you can use all packages available on npm, but it must return either a\n * Promise, a Stream or take a callback and call it\n */\nfunction clean() {\n // You can use multiple globbing patterns as you would with `gulp.src`,\n // for example if you are using del 2.0 or above, return its promise\n return del([ 'assets' ]);\n}\n\n/*\n * Define our tasks using plain functions\n */\nfunction styles() {\n return gulp.src(paths.styles.src)\n .pipe(less())\n .pipe(cleanCSS())\n // pass in options to the stream\n .pipe(rename({\n basename: 'main',\n suffix: '.min'\n }))\n .pipe(gulp.dest(paths.styles.dest));\n}\n\nfunction scripts() {\n return gulp.src(paths.scripts.src, { sourcemaps: true })\n .pipe(babel())\n .pipe(uglify())\n .pipe(concat('main.min.js'))\n .pipe(gulp.dest(paths.scripts.dest));\n}\n\nfunction watch() {\n gulp.watch(paths.scripts.src, scripts);\n gulp.watch(paths.styles.src, styles);\n}\n\n/*\n * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`\n */\nvar build = gulp.series(clean, gulp.parallel(styles, scripts));\n\n/*\n * You can use CommonJS `exports` module notation to declare tasks\n */\nexports.clean = clean;\nexports.styles = styles;\nexports.scripts = scripts;\nexports.watch = watch;\nexports.build = build;\n/*\n * Define default task that can be called by just running `gulp` from cli\n */\nexports.default = build;\n```\n\n## Use latest JavaScript version in your gulpfile\n\n__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][esm-module] module, and skip the Babel portion below.__\n\nNode 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`.\n\n```sh\nnpm install --save-dev @babel/register @babel/core @babel/preset-env\n```\n\nThen create a **.babelrc** file with the preset configuration.\n\n```js\n{\n \"presets\": [ \"@babel/preset-env\" ]\n}\n```\n\nAnd here's the same sample from above written in **ES2015+**.\n\n```js\nimport gulp from 'gulp';\nimport less from 'gulp-less';\nimport babel from 'gulp-babel';\nimport concat from 'gulp-concat';\nimport uglify from 'gulp-uglify';\nimport rename from 'gulp-rename';\nimport cleanCSS from 'gulp-clean-css';\nimport del from 'del';\n\nconst paths = {\n styles: {\n src: 'src/styles/**/*.less',\n dest: 'assets/styles/'\n },\n scripts: {\n src: 'src/scripts/**/*.js',\n dest: 'assets/scripts/'\n }\n};\n\n/*\n * For small tasks you can export arrow functions\n */\nexport const clean = () => del([ 'assets' ]);\n\n/*\n * You can also declare named functions and export them as tasks\n */\nexport function styles() {\n return gulp.src(paths.styles.src)\n .pipe(less())\n .pipe(cleanCSS())\n // pass in options to the stream\n .pipe(rename({\n basename: 'main',\n suffix: '.min'\n }))\n .pipe(gulp.dest(paths.styles.dest));\n}\n\nexport function scripts() {\n return gulp.src(paths.scripts.src, { sourcemaps: true })\n .pipe(babel())\n .pipe(uglify())\n .pipe(concat('main.min.js'))\n .pipe(gulp.dest(paths.scripts.dest));\n}\n\n /*\n * You could even use `export as` to rename exported tasks\n */\nfunction watchFiles() {\n gulp.watch(paths.scripts.src, scripts);\n gulp.watch(paths.styles.src, styles);\n}\nexport { watchFiles as watch };\n\nconst build = gulp.series(clean, gulp.parallel(styles, scripts));\n/*\n * Export a default task\n */\nexport default build;\n```\n\n## Incremental Builds\n\nYou can filter out unchanged files between runs of a task using\nthe `gulp.src` function's `since` option and `gulp.lastRun`:\n```js\nconst paths = {\n ...\n images: {\n src: 'src/images/**/*.{jpg,jpeg,png}',\n dest: 'build/img/'\n }\n}\n\nfunction images() {\n return gulp.src(paths.images.src, {since: gulp.lastRun(images)})\n .pipe(imagemin())\n .pipe(gulp.dest(paths.images.dest));\n}\n\nfunction watch() {\n gulp.watch(paths.images.src, images);\n}\n```\nTask run times are saved in memory and are lost when gulp exits. It will only\nsave time during the `watch` task when running the `images` task\nfor a second time.\n\n## Want to contribute?\n\nAnyone can help make this project better - check out our [Contributing guide](/CONTRIBUTING.md)!\n\n## Backers\n\nSupport us with a monthly donation and help us continue our activities.\n\n[![Backers][backers-image]][support-url]\n\n## Sponsors\n\nBecome a sponsor to get your logo on our README on Github.\n\n[![Sponsors][sponsors-image]][support-url]\n\n[downloads-image]: https://img.shields.io/npm/dm/gulp.svg\n[npm-url]: https://www.npmjs.com/package/gulp\n[npm-image]: https://img.shields.io/npm/v/gulp.svg\n\n[azure-pipelines-url]: https://dev.azure.com/gulpjs/gulp/_build/latest?definitionId=1&branchName=master\n[azure-pipelines-image]: https://dev.azure.com/gulpjs/gulp/_apis/build/status/gulp?branchName=master\n\n[travis-url]: https://travis-ci.org/gulpjs/gulp\n[travis-image]: https://img.shields.io/travis/gulpjs/gulp.svg?label=travis-ci\n\n[appveyor-url]: https://ci.appveyor.com/project/gulpjs/gulp\n[appveyor-image]: https://img.shields.io/appveyor/ci/gulpjs/gulp.svg?label=appveyor\n\n[coveralls-url]: https://coveralls.io/r/gulpjs/gulp\n[coveralls-image]: https://img.shields.io/coveralls/gulpjs/gulp/master.svg\n\n[gitter-url]: https://gitter.im/gulpjs/gulp\n[gitter-image]: https://badges.gitter.im/gulpjs/gulp.svg\n\n[backer-url]: #backers\n[backer-badge]: https://opencollective.com/gulpjs/backers/badge.svg?color=blue\n[sponsor-url]: #sponsors\n[sponsor-badge]: https://opencollective.com/gulpjs/sponsors/badge.svg?color=blue\n\n[support-url]: https://opencollective.com/gulpjs#support\n\n[backers-image]: https://opencollective.com/gulpjs/backers.svg\n[sponsors-image]: https://opencollective.com/gulpjs/sponsors.svg\n\n[quick-start]: https://gulpjs.com/docs/en/getting-started/quick-start\n[getting-started-guide]: https://gulpjs.com/docs/en/getting-started/quick-start\n[api-docs]: https://gulpjs.com/docs/en/api/concepts\n[esm-module]: https://github.com/standard-things/esm\n","readmeFilename":"README.md"}