Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

gulp

The streaming build system

Subscribe to updates I use gulp


Statistics on gulp

Number of watchers on Github 28948
Number of open issues 24
Average time to close an issue about 21 hours
Main language JavaScript
Average time to merge a PR 4 days
Open pull requests 20+
Closed pull requests 95+
Last commit over 1 year ago
Repo Created over 6 years ago
Repo Last Updated over 1 year ago
Size 1020 KB
Homepage http://gulpjs.com
Organization / Authorgulpjs
Latest Releasev4.0.0
Contributors161
Page Updated
Do you use gulp? Leave a review!
View open issues (24)
View gulp activity
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating gulp for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

The streaming build system

NPM version Downloads Build Status AppVeyor Build Status Coveralls Status OpenCollective Backers OpenCollective Sponsors Gitter chat

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

Installation

There are a few ways to install:

  • gulp v4.0.0 - npm install gulp@next
  • gulp v4.0.0-alpha.3 - npm install gulpjs/gulp#v4.0.0-alpha.3
  • gulp v3.9.1 - npm install gulp

Documentation

For a Getting started guide, API docs, recipes, making a plugin, etc. check out our docs!

Sample 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
 * 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
 */
function clean() {
  // 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 del([ 'assets' ]);
}

/*
 * Define our tasks using plain functions
 */
function styles() {
  return gulp.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));
}

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);
}

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));

/*
 * You can still use `gulp.task` to expose tasks
 */
gulp.task('build', build);

/*
 * Define default task that can be called by just running `gulp` from cli
 */
gulp.task('default', build);

Use latest 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.

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/'
  }
};

/*
 * For small tasks you can export arrow functions
 */
export const clean = () => del([ 'assets' ]);

/*
 * You can also declare named functions and export them as tasks
 */
export function styles() {
  return gulp.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));
}

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));
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}
export { watchFiles as watch };

/*
 * You can still use `gulp.task`
 * for example to set task names that would otherwise be invalid
 */
const build = gulp.series(clean, gulp.parallel(styles, scripts));
gulp.task('build', build);

/*
 * Export a default task
 */
export 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:

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({optimizationLevel: 5}))
    .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 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-newer example:

function images() {
  var dest = 'build/img';
  return gulp.src(paths.images)
    .pipe(newer(dest))  // pass through newer images only
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest(dest));
}

If you can't simply filter out unchanged files, but need them in a later phase of the stream, we recommend these plugins:

gulp-remember example:

function scripts() {
  return gulp.src(scriptsGlob)
    .pipe(cache('scripts'))    // only pass through changed files
    .pipe(header('(function () {')) // do special things to the changed files...
    .pipe(footer('})();'))     // for example,
                               // add a simple module wrap to each file
    .pipe(remember('scripts')) // add back all files to the stream
    .pipe(concat('app.js'))    // do things that require all files
    .pipe(gulp.dest('public/'))
}

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.

Backers

Sponsors

Become a sponsor to get your logo on our README on Github.

Sponsors

gulp open issues Ask a question     (View All Issues)
  • almost 3 years gulp watch error however gulp build works fine - Windows 10 Ubuntu Bash
  • about 3 years Plugin Guidelines to include node 0.10/0.12 support
  • about 3 years Migrate `pump` documentation
  • over 3 years [epic] vinyl-fs version 3.0.0
  • over 3 years [epic] Documentation work
  • over 3 years [Notice] graceful-fs deprecation warning
  • almost 4 years [Notice] gulp 4 release process
  • almost 4 years Gitbook plugin to mirror docs
  • about 4 years Enhanced Error module
  • about 4 years [notice] semver abuse incoming
  • about 4 years pull in external docs
  • about 4 years Better document using merge-stream to handle multiple streams being returned
  • over 4 years List of prominent blog posts
  • almost 5 years Migration Guide
  • almost 5 years Watching in Gulp: maintaining task and watch in separate places
  • over 5 years Who uses gulp?
  • over 5 years Deprecate gulp-util
  • over 5 years Document error management
  • over 5 years Bring error unpipe overrides into core
  • over 5 years Bring in new fs sandboxing system
  • over 5 years Files order is not preserved in buffer mode
gulp open pull requests (View All Pulls)
  • Upgrade undertaker
  • Modify getting started example for version 4.0
  • Add glob-stream, node-glob docs to API docs
  • Surface 'on' listener functionality
  • Add browserify (multiple destination) example
  • Update graceful-fs to ^4.0.0
  • Updated Β«Split tasks across multiple filesΒ» recipe
  • Added new gulpfile sample to README file with ES2015 version
  • Fix small typo
  • docs(recipes): Add sharing streams with labeledpipe
  • Add a minimal setup for BrowserSync with Gulp 4 & ES2015
  • correct gulp.task signature
  • Update CI
  • Fix syntax
  • Fix Error logging
  • Create Responsify-Images.md
  • Update browserify-uglify-sourcemap.md
  • Update LICENSE
  • ES2017 async functions
  • [Update] Copyright year to current
gulp questions on Stackoverflow (View All Questions)
  • Gulp-sass not compiling Foundation 6 properly
  • Can Gulp add a custom CSS?
  • Pass Parameter to Gulp Task
  • Heroku gulp deploy
  • Deploy Angular app with Gulp on Heroku: app crashed
  • how to minify bootstrap by gulp, installed by bower and move fonts to dist?
  • Split src and test files from gulp typescript js stream
  • How do I use gulp with tape?
  • Custom file modification with Gulp
  • How do I create a custom command to replace `gulp` or `npm run`?
  • Gulp recompilation of Less files restarts IIS Express in Visual Studio 2015
  • Java, gulp and maven folder structure
  • Livereload not working in Chrome using Gulp, what am I missing
  • Gulp can't seem to find compass mixins
  • gulp watch is not always working
  • Gulp babel es2015 transform very slow
  • Elixir gulp tdd to run specific test
  • How can I prefix a file name with it's parent directory using Gulp?
  • Error: Cannot find module 'dateformat' in gulp
  • Refresh a remote URL with Gulp
  • Gulp-jade: Using a path relative to the working file
  • Angularjs Karma and Typescript Gulp setup undefined error
  • gulp-usemin TypeError: Path must be a string. Received undefined
  • Gulp watch doesn't recompile
  • gulp command not found - error after installing gulp
  • strange syntax error with gulp-rev
  • MSDeploy/web deploy/publish using Gulp in Visual Studio Code
  • How can I pass arguments to a Gulp task?
  • What is difference between Gulp and Grunt in VS2015?
  • Gulp sass (libsass) extremely slow when using return
gulp list of languages used
gulp latest release notes

Breaking

  • Upgrade major versions of glob-watcher, gulp-cli & vinyl-fs (c1ba80c)
  • Replace chokidar as gulp.watch with glob-watcher wrapper (0c66069)

Fix

  • Add support for gulp.watch usage w/o opts or callback (9fc4125)

Update

  • Bind all undertaker functions on the gulp instance to allow destructuring (c691572)
  • Use published gulp-cli (468a703)

Docs

  • Clarify incremental builds example (c3dbc10)
  • Improve ES2015 task exporting examples (89acc5c)
  • Fix syntax in recipe example (723cbc4) - Closes #1715
  • Have gulp.lastRun take a function to avoid task registration (d420a6a)
  • Fix changelog typos (e931cb0) - Closes #1696
  • Add a BrowserSync with Gulp 4 recipe (477db84)
  • Add options.cwd for gulp.src API (d4ed3c7)
  • Update gulp.watch API to align with glob-watcher (5dc3b07)
  • Add Project structure section to CONTRIBUTING.md (0ac9e04)
  • Add missing parenthesis (1351fb8)
  • Add link to Upgrading to Gulp 4 article (e894312)
  • Update getting started example for new syntax (5ddd673)
  • Add ES2015 gulpfile example to readme (e1afdfd)
  • Add link to Intro to Gulp 4 video (d90198c)
  • Replace irc with gitter channel (83f5632)
  • Update table of contents for API (b764543)
  • Improve format of API (d0ced75)

Upgrade

Breaking

  • Replace vinyl-fs watch/gaze with chokidar (2cd0e1e)
  • Only support tasks that are functions in gulp.watch (1d70cfb)
  • Remove array & string task support from gulp.watch (b085e95)

Fix

  • Set chokidar option ignoreIntial: true by default (355fc4e)
  • Throw better error when watch parameters are invalid (409f19a) - Closes #1002

New

  • Expose vfs.symlink API on gulp (6c46116)

Update

  • Add test to make sure no functions are kicked off when they should not (bc352dd)
  • Use unpublished vinyl-fs version (cac9a8a)

Docs

  • Update split tasks recipe to use gulp-hub (f7e7d4c)
  • Align API with undertaker docs (0f3151e)
  • Improve gulp.watch API with Chokidar specifics (263eeea)
  • Add gulp.registry API & examples (3f843b8)
  • Improve API references (be2df06)
  • Add example of -T/--tasks and --tasks-simple (c1012cd)
  • Add gulp.tree API & examples (8aa1022)
  • Add recipe for running shell commands with child_process or gulp-exec (98b9504)
  • Update clean task in example for del syntax change (cacc173)
  • Add note about opt-in symlink following (c4b6922)
  • Mention .description property & add usage examples (ad627e6)
  • Outline using named functions and when to use gulp.task (1abb5ed)
  • Improve incremental build example & add gulp.lastRun API (d942cf5)
  • Added allowEmpty option for gulp.src (8806326)
  • Add gulp.series/gulp.parallel APIs, update gulp.task API & vinyl-fs options (0ac0a0e)
  • Improve changelog (87e9cb6)

Upgrade

Breaking

  • Replace Orchestrator with Undertaker (9fda7b4)

New

Update

  • Remove gulp-util & depend on unpublished gulp-cli (6095f35)
  • Improve gulp.watch implementation & tests (9abb0a4)
  • Replace inline CLI code with gulp-cli dependency (f0942aa)

Docs

  • Add Rollup with rollup-stream recipe. (b42acd9)
  • Add npm init step to Getting Started (71953b5)
  • Add backers and sponsors from OpenCollective (347ed5a)
  • Fix grammar in dealing-with-streams.md (de1acf6)
  • Create issue template to cover common issues (4d1a8a8)
  • Fix broken gulp-header/gulp-footer links (54169eb) - Closes #1851 #1854
  • Update browserify-uglify-sourcemap recipe with clarification (6899a6c)
  • Clarify CLI semantics when listing more than one task (62323fc)
  • Fix issue with formatting in dealing-with-streams.md (a2badd6) - Closes #1948
  • Fix sub-lists in writing-a-plugin guidelines (d634e95) - Closes #1955
  • Add Getting Started with Gulp to books section (a0ec3ff)
  • Integrate pump documentation from gulp-uglify (45adfc3) - Closes #1791
  • Remove link to Spanish documentation that no longer exists (24914f3)
  • Replace BetterError with plugin-error reference (58b2945)
  • Fix a broken header in writing-a-plugin (5df0865) - Closes #1984
  • Improve Getting Started (c95e09e)
  • Improve link descriptions (c4d219e)
  • Recipe for running gulp via cron task (2c6d551)
  • Change jade references to pug (81fc26d)
  • Specify where to create package.json (4f9465a)
  • Fix and improve Transform example in writing-a-plugin docs (4b118b9)
  • Update urls to https (ff4e719)
  • Update browserify links (260d5c4)
  • Remove duplicate the typo (5368d2c)
  • Add 4.0 changelog (d331a4e)
  • Update syntax in readme example (f787ba5)
  • Update changelog (2d0fa20)

Upgrade

Build

  • CI test under node version 5 and 6 (3623061)
  • CI test under node version 7 and 8 (f1f7d77)
Other projects in JavaScript