gulp

What is gulp?

Gulp is a toolkit that helps developers automate and enhance workflows. It is a streaming build system that allows the use of Node streams to read files from the filesystem, transform them, and output them back to the filesystem or elsewhere. Gulp is commonly used for tasks such as minification, concatenation, cache busting, unit testing, linting, and optimization.

What are gulp's main functionalities?

Task Automation

Automate repetitive tasks with custom defined tasks.

const gulp = require('gulp');
gulp.task('default', function() {
  // Your task code here
});

File Minification

Minify JavaScript files to reduce their size for production.

const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('minify-js', function() {
  return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

File Concatenation

Concatenate multiple files into a single file.

const gulp = require('gulp');
const concat = require('gulp-concat');
gulp.task('concat-js', function() {
  return gulp.src('src/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist'));
});

Sass Compilation

Compile Sass files into CSS.

const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function() {
  return gulp.src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

Live Reloading

Automatically reload the browser when files are modified.

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
gulp.task('serve', function() {
  browserSync.init({
    server: './dist'
  });
  gulp.watch('src/*.html').on('change', browserSync.reload);
});

Other packages similar to gulp

webpack

Webpack is a powerful module bundler that can also run many of the same tasks as Gulp, but it focuses more on bundling JavaScript modules together. It has a different plugin system and uses a configuration file for defining the build steps.

grunt

Grunt is another task runner like Gulp, but it uses a configuration-over-code approach. It has a large plugin ecosystem and is configured in a declarative manner, which can be more verbose than Gulp's code-based task definitions.

rollup

Rollup is a module bundler for JavaScript which uses the new standardized format for code modules included in the ES6 revision of JavaScript. It is similar to Webpack but is known for producing smaller bundles.

parcel

Parcel is a web application bundler that offers a zero-configuration setup. It aims to provide out-of-the-box support for many development tasks without the need for additional plugins or configurations, unlike Gulp which requires setting up tasks and plugins.

broccoli

Broccoli is a fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions. Similar to Gulp, it uses a plugin architecture but focuses on providing the fastest rebuilds and simplicity in build configurations.

README

gulp

The streaming build system

Like what we do?

Support us via gittip

Documentation

For a Getting started guide, API docs, recipes, making a plugin, etc. see the documentation page!

Sample gulpfile

This file is just a quick sample to give you a taste of what gulp does.

var gulp = require('gulp');

var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

gulp.task('scripts', function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', function() {
 return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['scripts', 'images', 'watch']);

Incremental Builds

We recommend these plugins:

• gulp-changed
• gulp-cached

Want to contribute?

Anyone can help make this project better - check out the Contributing guide!