gulpjs/gulp


The streaming build system

http://gulpjs.com

License: MIT

Language: JavaScript


The streaming build system

NPM version Downloads Azure Pipelines Build Status 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 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

Installation

Follow our Quick Start guide.

Roadmap

Find out about all our work-in-progress and outstanding issues at https://github.com/orgs/gulpjs/projects.

Documentation

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.

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

/*
 * 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 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][esm-module] 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.

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

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

const build = gulp.series(clean, gulp.parallel(styles, scripts));
/*
 * 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.

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

Project Statistics

Sourcerank 25
Repository Size 1020 KB
Stars 31,504
Forks 4,403
Watchers 1,164
Open issues 27
Dependencies 12
Contributors 229
Tags 22
Created
Last updated
Last pushed

Top Contributors See all

contra Blaine Bublitz Sindre Sorhus Rob Richardson Janice Niemeir Tyler Kellen tomasz stryjewski William Lubelski Vsevolod Strukchinsky Callum Macrae Steve Mao Steve Lacy Nicholas Albion Damien Lebrun James Crowley Terin Stock Arvind Ravulavaru Larry Davis Bo-Yi Wu Antonis Karamitros

Packages Referencing this Repo

gulplocal
The streaming build system
Latest release v4.0.2 - Published - 31.5K stars
gulp
The streaming build system.
Latest release 4.0.2 - Updated - 31.5K stars
@xmader/gulp-v3
The streaming build system
Latest release 3.9.4 - Updated - 31.5K stars
not-gulp
The streaming build system
Latest release 4.0.0 - Published - 31.5K stars
gulp-rjw
The streaming build system
Latest release 3.9.1 - Published - 31.5K stars
gulp-ibby
The streaming build system
Latest release 4.0.0-alpha.2 - Published - 31.5K stars
gulp4lf
The streaming build system
Latest release 4.0.2 - Published - 31.5K stars
bk-gulp
The streaming build system
Latest release 4.0.0-alpha.2 - Published - 31.5K stars
kulp
The streaming build system
Latest release 3.9.2 - Updated - 31.5K stars
gulp4
The streaming build system.
Latest release 4.0.3 - Updated - 31.5K stars
gulp-4-preview
Unofficial preview of gulp 4
Latest release 4.0.0-alpha.2 - Published - 31.5K stars
org.webjars.npm:gulp
WebJar for gulp
Latest release 4.0.0 - Updated - 31.5K stars
pz
Dead simple templating.
Latest release 1.1.1 - Updated - 31.5K stars
gulp
The streaming build system
Latest release v4.0.2 - Published - 31.5K stars
evented-require
Require modules and receive events.
Latest release 1.0.0 - Published - 31.5K stars
refresh-gulp
The streaming build system
Latest release 0.0.1 - Published - 31.5K stars
lzrski-gulp-4
The streaming build system
Latest release 4.0.0-alpha.2-d8f5c90 - Published - 31.5K stars
gulp-4.0.build
The streaming build system
Latest release 4.0.0-build.b7f3e2c - Updated - 31.5K stars
rjtempg4
The streaming build system
Latest release 4.0.0-alpha.1 - Published - 31.5K stars
tempgulp4
The streaming build system
Latest release 4.0.0-alpha.2 - Published - 31.5K stars

Recent Tags See all

v4.0.2 May 06, 2019
v4.0.1 April 21, 2019
v4.0.0 January 01, 2018
v4.0.0-alpha.3 December 31, 2017
v4.0.0-alpha.2 December 31, 2017
v4.0.0-alpha.1 December 31, 2017
v3.9.1 February 08, 2016
v3.9.0 June 01, 2015
v3.8.11 February 09, 2015
v3.8.10 November 04, 2014
v3.8.9 October 22, 2014
v3.8.8 September 07, 2014
v3.8.7 August 02, 2014
v3.8.6 July 09, 2014
v3.8.5 June 27, 2014

Interesting Forks See all

electric-eloquence/gulp
The streaming build system (v3 with long-term support)
JavaScript - MIT - Last pushed - 3 stars - 1 forks
LIUBOliubo/gulp
The streaming build system
JavaScript - Updated - 2 stars
xgqfrms-GitHub/gulp
The streaming build system
JavaScript - Last pushed - 2 stars - 1 forks
humorHan/gulp
The streaming build system
JavaScript - Updated - 2 stars
HstarStudio/gulp
The streaming build system
JavaScript - MIT - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-08-22 04:09:39 UTC

Login to resync this repository