How To Set up a Gulp Script for Faster Front-end Development

Front-end development is an interesting beast of its own. It mostly deals with user experience, which requires constant tuning of page layout and experience flow.

Do you find yourself refresh that page for the 18 times? Do you find yourself run the script every time before deployment to uglify the page? There is a ton of room for automation here!

Most famously, the Front-end world seems to be using Gulp or Grunt for this kind of task (this statement may be false very soon with the speed of tool iteration in the JS community). Not to spark any debates here, but I am pretty happy with Gulp, mainly because of its pipelining operators feels very functional.

This post outlines a simple setup that I borrowed from various places and it should be enough to get you started with automating many of the repetitive tasks.

Setting up Gulp is relatively straightforward, you first need to install Gulp globally to use it as a command line tool. With yarn, this is as easy as

yarn global add gulp

For Gulp to run within a project, at the root of the project folder, you need to create a gulpfile.js file with

var gulp = required('gulp');

A common use case of Gulp is to automatically uglify/minify the .css, .js and .html files. This is a required step before any front-end deployment to reduce the size of files being shipped to clients. A few packages are used to achieve this goal, which can be introduced as development dependencies for your project by

yarn dev add gulp-clean-css, gulp-uglify, gulp-contact, \
             gulp-sourcemaps, gulp-minify-html

Another use case is to generate various size of an images for responsive design. It usually means modify the dimension and quality of an image so that it could be displayed reasonable and fast on either desktop or phones. That’s a part of the UI usually requires constant iterations and refinement. A handy package can be used to save time by auto modify images as you iterate.

yarn dev add gulp-responsive

Lastly, and this is a killing feature in my eyes, Gulp saves you from refreshing the page hundreds of times – an inevitable action during front-end development. The way it works is Gulp runs a test web server that constantly watching the directories and refresh the page once it detects a change. For this to work, another package needs to be installed.

yarn dev add gulp-webserver

Assuming you put all the raw files inside a source folder and want to have your optimized files inside a build folder, you could add the following code into the gulpfile.js to achieve all the automation listed above.

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var webserver = require('gulp-webserver');
var uglify = require('gulp-uglify');
var concatify = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var minifyhtml = require('gulp-minify-html');
var responsive = require('gulp-responsive');

// Paths to various files
var paths = {
    scripts: ['source/js/*.js'],
    styles: ['source/css/**/*.css'],
    images: ['source/image/**/*'],
    content: ['source/index.html']
};

// Compress css files and outputs them to build/css/*.css
gulp.task('styles', function() {
    return gulp.src(paths.styles)
        .pipe(minifycss({compatibility: 'ie8'}))
        .pipe(gulp.dest('./build/css/'));
});

// Concats & minifies js files and outputs them to build/js/app.js
gulp.task('scripts', function() {
    return gulp.src(paths.scripts)
        .pipe(sourcemaps.init())
            .pipe(uglify())
            .pipe(concatify('app.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./build/js/'));
});

// Minifies our HTML files and outputs them to build/*.html
gulp.task('content', function() {
    return gulp.src(paths.content)
        .pipe(minifyhtml({
            empty: true,
            quotes: true
        }))
        .pipe(gulp.dest('./build'));
});

// Optimizes our image files and outputs them to build/image/*
gulp.task('images', function() {
    return gulp.src(paths.images)
        .pipe(responsive({
            'hero.jpg': [
                {
                    width: 960,
                    height: 450,
                    rename: 'hero-large.jpg'
                },
                {
                    width: 515,
                    height: 465,
                    rename: 'hero-small.jpg'
                }
            ],
            'project-*.jpg': {
                width: 250,
                height: 250
            }
        },{
            errorOnUnusedImage: false
        }))
        .pipe(gulp.dest('./build/image/'));
});

// Watches for changes to our files and executes required scripts
gulp.task('watch', function() {
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.styles, ['styles']);
    gulp.watch(paths.content, ['content']);
    gulp.watch(paths.images, ['images']);
});

// Launches a test webserver
gulp.task('webserver', function() {
    gulp.src('./build')
        .pipe(webserver({
            livereload: true,
            fallback: "index.html",
            port: 8080
        }));
});

gulp.task('default', ['styles', 'scripts', 'content', 'images', 'watch', 'webserver']);

And, with that, you could just hit the following command in the project’s root directory and watch magic to happen.

gulp