gulp README

The project's README from github.com/gulpjs/gulp. As one markdown file: README.md.

The streaming build system

NPM version Downloads Build Status Coveralls Status

What is gulp?

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

Gulp provides a wrapper that will be loaded in your ESM code, so you can name your gulpfile as gulpfile.mjs or with "type": "module" specified in your package.json file.

And here's the same sample from above written in ESNext.

import { src, dest, watch } 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 {deleteAsync} 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 = () => deleteAsync([ 'assets' ]);

/*
 * You can also declare named functions and export them as tasks
 */
export function styles() {
  return src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(dest(paths.styles.dest));
}

export function scripts() {
  return src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(dest(paths.scripts.dest));
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles() {
  watch(paths.scripts.src, scripts);
  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())
    .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!

gulp (gulpjs/gulp)

Searching Database…

32.9K ·GitHub
Gulp
What is this?gulp is a JavaScript toolkit that automates repetitive or time-consuming tasks in your development workflow by piping files through a chain of streaming transformations.
Is gulp only for Node.js projects, or can other stacks use it too?Under the hood it's a Node.js library you script with a gulpfile, but because major IDEs integrate it directly, people also use it to run build tasks for PHP, .NET, and Java projects.
How do I start using gulp in a project?Install gulp-cli globally and gulp as a dev dependency with npm, then write a gulpfile.js (or gulpfile.mjs) defining your tasks using gulp.src/gulp.dest and streams.
What Node.js version does gulp need?gulp requires Node.js 10.13.0 or newer, as declared in its engines field.
Does gulp remember which files changed between builds?It can skip unchanged files during a task run using gulp.src's since option with gulp.lastRun, but run times are kept only in memory and reset whenever gulp exits, so the benefit mainly shows up while a watch task stays running.
Does gulp behave the same on Windows, macOS, and Linux?Yes — gulp is a Node.js CLI/library, so it runs identically anywhere Node.js runs, including Windows, macOS, and Linux.
What makes gulp different from writing custom build scripts by hand?gulp uses Node streams to pipe files through transformations without writing intermediate files to disk, and gives access to over 3000 curated npm plugins instead of reinventing file-processing logic.
Can I write my gulpfile using modern ES module syntax?Yes, gulp provides a wrapper that lets you name your file gulpfile.mjs or set type module in package.json, and use ESNext syntax directly.
How many plugins are available for gulp?The ecosystem includes over 3000 curated plugins published on npm for streaming file transformations.
What are similar projects?husky, nodemon, cz-cli, task, ordewell, truffle, yeoman, lint-staged
Which topics is it in?task-management, build-tool, workflow, workflow-automation, streaming, command-line-tool, npm, terminal, automation, tool, nodejs, javascript
Creator
gulpjs
Size
1.1 MB
Stars
32.9K
Updated
CommitFeb 09Releasev5.0.1Jun 01
Age
13y
Commits · 90 Days