Gulp.js Build System Cheatsheet

Gulp is a streaming task runner for Node.js that automates development workflows and asset transformation pipelines.

Archived note: This cheatsheet documents classic Gulp streaming pipelines and common build tasks.

Common Plugins

• gulp-sass: SASS / SCSS compiler
• gulp-autoprefixer: Prefix CSS with vendor properties
• gulp-clean-css (formerly gulp-minify-css): CSS minifier
• gulp-jshint / gulp-eslint: JavaScript linter
• gulp-concat: Concatenate files into single bundles
• gulp-uglify: JavaScript minifier
• gulp-imagemin: Optimize image files
• gulp-rename: Rename files with prefixes or suffixes
• gulp-livereload: Browser livereload trigger
• gulp-notify: Desktop notifications on build completion

Complete gulpfile.js Example

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const notify = require('gulp-notify');

// Styles Task: Compile SCSS, Autoprefix, Minify
gulp.task('styles', function () {
  return gulp.src('src/styles/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ overrideBrowserslist: ['last 2 versions'] }))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

// Scripts Task: Lint, Concatenate, Uglify
gulp.task('scripts', function () {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

// Images Task: Lossless optimization
gulp.task('images', function () {
  return gulp.src('src/images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
    .pipe(notify({ message: 'Images task complete' }));
});

// Watch Task: File change monitoring
gulp.task('watch', function () {
  gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
  gulp.watch('src/scripts/**/*.js', gulp.series('scripts'));
  gulp.watch('src/images/**/*', gulp.series('images'));
});

// Default Task
gulp.task('default', gulp.parallel('styles', 'scripts', 'images'));

References

• Gulp Official Documentation
• Gulp Plugin Registry