Gulp

A toolkit to automate & enhance your workflow.

• gulpjs.com
• github.com/gulpjs/gulp

Installation

Install the gulp command line utility

npm install --global gulp-cli

Install the gulp package in your devDependencies

npm install --save-dev gulp

Configuration

Create a file named gulpfile.js

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

Creating Tasks

const { series, parallel } = require('gulp');

function clean() {
  // body omitted
}

function cssTranspile() {
  // body omitted
}

function cssMinify() {
  // body omitted
}

function jsTranspile() {
  // body omitted
}

function jsBundle() {
  // body omitted
}

function jsMinify() {
  // body omitted
}

function publish() {
  // body omitted
}

exports.build = series(
  clean,
  parallel(cssTranspile, series(jsTranspile, jsBundle)),
  parallel(cssMinify, jsMinify),
  publish
);

Watching Files

const { watch } = require('gulp');

function css() {
  // body omitted
}

exports.default = function() {
  watch('src/*.css', css);
};

Popular plugins

• gulpjs.com/plugins

Recommended plugins

HTML

• gulp-file-include
  a gulp plugin for file include.

• gulp-jsbeautifier
  Beautify js, css, html and json files using Gulp and js-beautify.

• gulp-imagemin
  Minify PNG, JPEG, GIF and SVG images with imagemin.

CSS

• gulp-postcss
  PostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once.

• autoprefixer
  PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

• cssnano
  A modular minifier, built on top of the PostCSS ecosystem.

• gulp-sass
  SASS plugin for gulp.

• gulp-inline-css
  Inline linked css in an html file. Useful for emails.

Javascript

• gulp-babel
  Use next generation JavaScript, today, with Babel.

• gulp-uglify
  Minify JavaScript with UglifyJS3.

Git

• gulp-conventional-changelog
  Generate a changelog using conventional-changelog.

Misc

• del
  Delete files and directories.

• gulp-if
  Conditionally run a task.

• gulp-rename
  gulp-rename is a gulp plugin to rename files easily.

• gulp-sourcemaps
  Sourcemap support for gulpjs.

• gulp-concat
  Streaming concat middleware for gulp.

• gulp-useref
  Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.

• gulp-header
  Gulp extension to add a header to file(s) in the pipeline.

• merge-stream
  Merge multiple streams into one interleaved stream.

• gulp-shell
  A handy command line interface for gulp.