A Simple Gulp Workflow

Gulp, as you may have heard, is a javascript "task runner" that allows us to automate certain tasks in our development workflow. We use it by defining what tasks we want to automate in a gulpfile.js, and running that through the command line.

Although there are several other similar task runners, I chose to use Gulp because it is javascript-based and, because of its extensive library of plugins and incredibly simple API, it can be easily extended to do pretty much anything you can think of to automate.

If you are just getting started, it can be as simple as you need it to be. When I first started using Gulp, all I wanted and needed it for was -

• To compile and minify my SASS files, and
• To concatenate and minify my various javascript files.

Here is the simple gulp workflow I used to accomplish this.

Installing Gulp and Plugins #

To get started, install gulp globally by typing the following command into your terminal -

$ npm install --global gulp

If you are using a Mac, you may need to prepend this statement with a sudo command. Next, while in your project directory, install gulp locally as a developer dependency -

$ npm install --save-dev gulp

Now, we can install any plugins needed. To install a plugin, we type -

$ npm install --save-dev [plugin-name]

These are the plugins I used for this simple workflow -

Plugin	Description
gulp-sass	Compiles SASS to CSS
gulp-concat	Concatenates files
gulp-uglify	Minifies js files
gulp-util	Utility functions. For example, outputs descriptive error messages in the terminal

The Gulpfile #

Once we have installed gulp and any plugins, we need to create a gulpfile.js in the root of the project directory.

A very basic gulpfile could look like this -

// First require gulp
var gulp = require('gulp');

// Define default task
gulp.task('default', function() {
  console.log("Hello, world!");
});

For this simple workflow, this is my gulpfile -

// Require gulp and plugins
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    gutil = require('gulp-util');


// Define file sources
var sassMain = ['development/sass/main.scss'];
var sassSources = ['development/sass/**/*.scss']; // Any .scss file in any sub-directory
var jsSources = ['development/scripts/*.js']; // Any .js file in scripts directory


// Task to compile SASS files
gulp.task('sass', function() {
    gulp.src(sassMain) // use sassMain file source
        .pipe(sass({
            outputStyle: 'compressed' // Style of compiled CSS
        })
            .on('error', gutil.log)) // Log descriptive errors to the terminal
        .pipe(gulp.dest('assets/css')); // The destination for the compiled file
});


// Task to concatenate and uglify js files
gulp.task('concat', function() {
    gulp.src(jsSources) // use jsSources
        .pipe(concat('script.js')) // Concat to a file named 'script.js'
        .pipe(uglify()) // Uglify concatenated file
        .pipe(gulp.dest('assets/js')); // The destination for the concatenated and uglified file
});


// Task to watch for changes in our file sources
gulp.task('watch', function() {
    gulp.watch(sassMain,['sass']); // If any changes in 'sassMain', perform 'sass' task
    gulp.watch(sassSources,['sass']);
    gulp.watch(jsSources,['concat']);
});


// Default gulp task
gulp.task('default', ['sass', 'concat', 'watch']);

With this workflow, my folder structure will be like this -

project/
- gulpfile.js
- index.html
- development/
  - sass/
    - main.scss
    - _partial.scss
    - folder/
      - // more partials.scss
  - scripts/
    - // various files.js
- assets/
  - css/
    - main.css
  - js/
    - script.js

To start the gulp default task, all we have to do is run the following command while in the root of the project directory -

$ gulp

We can also run specific gulp tasks by writing -

$ gulp [task-name]

Some Useful Plugin Features #

As I mentioned, gulp can be used for much more than just compilation and concatenation. Here are a some useful features and the plugins you can use to acheive them.

Run A Local Server With Live Reload #

var connect = require('gulp-connect');

gulp.task('serve', function() {
  connect.server({
    port: 8888,
    livereload: true
  });
});

With this plugin, we can also specify that the server reload when another task is finished running. For example -

gulp.task('sass', function() {
    gulp.src(sassMain)
        .pipe(sass({
            outputStyle: 'compressed'
        })
            .on('error', gutil.log))
        .pipe(gulp.dest('assets/css'))
        .pipe(connect.reload()); // Reload
});

Minify HTML #

var minifyHTML = require('gulp-minify-html');

gulp.task('html', function() {
  gulp.src(htmlSources)
    .pipe(minifyHTML())
    .pipe(gulp.dest(''));
});

Publish Repo To Github Pages #

var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});

Convert Markdown to HTML #

var markdown = require('gulp-markdown');

gulp.task('md', function () {
    return gulp.src('*.md')
        .pipe(markdown())
        .pipe(gulp.dest('dist'));
});

Lint Your CSS Files #

var csslint = require('gulp-csslint');

gulp.task('css-lint', function() {
  gulp.src('assets/css/*.css')
    .pipe(csslint())
    .pipe(csslint.reporter());
});

You can check out all the gulp plugins in their plugin directory.