gulpfile.js for website frontend development: image optimisation, styles compilation, javascript uglify, static assets revisioning, browser-sync

README.md

Purpose:

This is the gulpfile I use for automating tasks involved in developing non-modular website front-end.

Directory structure:

- dist
- src
  |- images
  |- scripts
     |- vendor
  |- styles
  |- index.php
  |- ...
- gulpfile.js

Usage

gulp

Default task cleans the target directory, performs initial build (without static revisioning), executes browser sync and starts watching for file changes.

gulp compile

Cleans the target directory, performs build, create revisions of static files and quits.

FAQs:

Why Browserify, Require.js or other modular-based tool is not used?

The main usage of this gulpfile is for building a smaller site, where you typically use Moderznizr, jQuery with one or two libraries and your own code (which is usually quiet short as jQuery does all heavy lifting).

How about HTTP/2?

This gulpfile lives in HTTP/1.1 era. If your web hosting supports HTTP/2 and you want to switch to it, it is fairly easy to remove pieces that aim to minimise the number of HTTP requests.

gulp.run() is deprecated, why is it used?

I decided to get everything working and than wait for Gulp 4 to tweak it further.

gulpfile.js

var gulp = require('gulp'),
    del = require('del'),
    runsequence = require('run-sequence'),
    watch = require('gulp-watch'),
    plumber = require('gulp-plumber'),
    sass = require('gulp-sass'),
    cssnano = require('gulp-cssnano'),
    rename = require('gulp-rename'),
    base64 = require('gulp-base64'),
    RevAll = require('gulp-rev-all'),
    imagemin = require('gulp-imagemin'),
    uglify = require('gulp-uglify'),
    stripcomments = require('gulp-strip-comments'),
    gulpif = require('gulp-if'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create();

var paths = {
    /*
     * All JavaScript files in order in which they should be loaded
     */
    scripts: [
        './src/scripts/vendor/modernizr-custom.js',
        './src/scripts/vendor/jquery-2.2.1.min.js',
        './src/scripts/vendor/bootstrap-datepicker.min.js',
        './src/scripts/app.js'
    ],
    /*
     * Extra JS libraries or polyfills which are not always needed
     * but have to be copied do dist folder.
     */
    libs: [
        './src/scripts/vendor/object-fit-polyfill.min.js'
    ]
};

/*
 * Clean the target directory
 */
gulp.task('clean', function() {
    del.sync('dist/*');
});

/*
 * Copy libraries to the target directory
 */
gulp.task('libs', function(){
    return gulp.src(paths.libs, {base: 'src/scripts/vendor'})
        .pipe(gulp.dest('dist/js'))
});

/*
 * Optimise images
 */
gulp.task('img', function() {
    return gulp.src('src/images/**/*', {base: 'src'})
        .pipe(plumber())
        .pipe(imagemin())
        .pipe(gulp.dest('dist'));
});

/*
 * Uglify and combine JavaScript files. In case a file isare already uglified, just strip comments
 * (it takes several seconds to uglify libraries like jQuery so it is faster to use production versions)
 */
gulp.task('scripts', function() {
    return gulp.src(paths.scripts)
        .pipe(plumber())
        .pipe(gulpif(['*', '!*.min.*'], uglify(), stripcomments()))
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('dist/js'));
});

/*
 * Compile SASS files, autoprefix, minify, inline background images up to 4kB and build sourcemaps.
 * I use a file named app.scss to define global variables and include all other SCSS files.
 */
gulp.task('styles', function() {
    return gulp.src(['src/styles/app.scss'])
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['> 1%']}))
        .pipe(cssnano({
            safe: true,
            discardComments: {removeAll: true}
        }))
        .pipe(base64({
            baseDir: 'dist',
            maxImageSize: 4 * 1024 // bytes
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'));
});

/*
 * Directly copy source PHP files to the target directory
 */
gulp.task('html', function(){
    return gulp.src('src/**/*.php')
        .pipe(plumber())
        .pipe(gulp.dest('dist'));
});

/*
 * Revision static files and rewrite references, excluding PHP files
 */
gulp.task('rev', function() {
    var revall = new RevAll({ dontRenameFile: ['.php'], dontUpdateReference: ['.php'], debug: true });
    gulp.src('dist/**')
        .pipe(revall.revision())
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', function () {
    watch('src/images/**/*.*', {}, function () {
        gulp.run('img');
    });
    watch('src/styles/*.{scss,css}', {}, function () {
        gulp.run('styles');
    });
    watch('src/scripts/**/*.js', {}, function () {
        gulp.run('scripts');
    });
    watch('src/**/*.php', {}, function () {
        gulp.run('html');
    });
});

gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: "example.com.loc",
        host: "example.com.loc",
        open: 'external',
        files: ["dist/**/*.css"]
    });
});

gulp.task('compile', function () {
    runsequence('clean', 'libs', 'img', ['styles', 'scripts'], 'html', 'rev');
});

gulp.task('default', function(){
    runsequence('clean', 'libs', 'img', ['styles', 'scripts'], 'html', 'browser-sync', 'watch');
});