Utilising Gulp to improve your Development workflow

Posted:

Image Source: Charles Edward Williams, Visual Artist

In the past, I used a variety of tools to help improve our workflow over the years, including compass, Codekit, Prepos and SimpLESS.

These tools are often helpful if we want to compile our SASS/SCSS, minify our CSS and Javascript, and, optimise our images.

I consistently ran into issues with these applications, some of them eating your memory & often crash, making your developer life incredibly frustrating.

In the past year I have got around to start using Grunt & Gulp, and, I know I am a little late to the party here, but, they are both really great, and if you haven't yet tried, continue reading on to get started!

At the time of writing this, Gulp is currently the more dominant and widely used.

How do I use Gulp?

Overview

The short version is that you need:

  • gulp-cli installed globally through npm
  • A suitable package.json in your project folder
  • A suitable gulpfile.js in your project folder
  • cd to your project folder, "npm install"
  • run your watch task, "gulp watch" for example
  • Start compiling your sass/js etc

Here is the official getting started gulp page.

Setting up Gulp

Step One: Installing Gulp globally

You will need to globally install gulp-cli, open up terminal and type:

npm install --global gulp-cli

Step Two: Creating a package.json

Create a suitable "package.json" file, you can put this in your project's root folder. The quickest way to do this is to "cd" to your project directory in terminal and type:

npm init

This will ask you a series of questions, when done you will have a "package.json" to work with, open it up in your code editor & take a look! Make any amends you feel are necessary.

Step Three: Modifying your package.json

Now you have a workable package.json, you can add your "devDependencies" to it. You can do this by using the "--save-dev" flag.

So now make sure in your terminal window you have cd into your project's root folder and type the following:

npm install gulp --save-dev

This will install gulp into the project (not globally).

Now take a look at your package.json, it should appear similar to this:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

We can remove some of these lines which aren't required and shorten it to the following:

{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

Step Four: Add Gulp plugins to package.json

Now, using the same method, we can add more and more Gulp plugins to your project!

So running this:

npm install gulp-sass gulp-uglify gulp-rename gulp-jshint --save-dev

Will turn your package.json into this:

{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-jshint": "^2.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0"
  }
}

Tip: often at the top of a plugin's page on the npm site there will be a reference to the install line so you can copy & paste it quickly, here is gulp-sass for example.

Step Five: Loading Gulp plugins into your gulpfile.js

Create a new file in the project's root folder called "gulpfile.js".

To utilise the plugins we installed previously we file need to assign them to variables like this:

var gulp = require("gulp");
var sass = require("gulp-sass");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var jshint = require('gulp-jshint');

Tip: often at the top of a plugin's page on the npm site there will be an example for setting the variable so you can copy & paste it quickly, here is gulp-sass for example.

Step Six: Setting up a SASS compiling task

This task compiles .scss files to css files in the directory "/resources/scss/".

gulp.task("sass", function () {
    return gulp.src([
        "./resources/scss/*.scss",
        "!/.resources/*/*.scss"
      ])
      .pipe(sass({outputStyle: "compressed"}).on("error", sass.logError))
      .pipe(gulp.dest("./resources/css"));
});

The task ignores any additional scss files in deeper folders, because personally I would be importing them into the top-level scss folder.

The outputStyle is "compressed" because that's how I like my css...

And the last line will put your file in a destination.

Step Seven: Minify Javascript with a Gulp task

In a similar way to the last task, this will minify files in the "/resources/js/" directory, but, ignores files that have filename extensions of ".min.js".

gulp.task("js", function() {
    return gulp.src([
        "./resources/js/*.js",
        "!./resources/js/*.min.js",
        "!./resources/js/*/*.min.js"
        ])
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(uglify())
        .on('error', onError)
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("./resources/js/"))
});

In addition this task uses JShint to help you debug your Javascript code if it has any problems, it then highlights them in your terminal window. After that, before the file is output it renames it add the ".min.js" extension to the filename.

Step Eight: Setting up a watch task

This task utilises watching files, for the first parameter, string to a directory (or an array for multiple directories). The second parameter is the name of the task which will be triggered if it has detected that a file has changed.

gulp.task("watch", function () {
    livereload.listen();
    gulp.watch("./resources/scss/**/*.scss", ["sass"]);
    gulp.watch(
      [
        "./resources/js/**/*.js", 
        "!./resources/js/**/*.min.js"
      ], ["js"]);
});

This is watching for all scss file changes, and, is watching for changes in all javascript files, apart from minified javascript files. If we didn't ignore the minified files, we would create a loop creating multiple versions of the same minified file that would look similar to this: 

global.min.js.min.js.min.js.min.js.min.js.min.js.min.js.min.js.min.js.min.js

Conclusion

Ultimately, despite being quite daunting, Gulp does give you an enormous amount of control flexibility.

Gulp allows you to utilise javascript in the config files where you can pass variables, maths, and, all sorts!

For some of the more complex tasks, it can get a little more time consuming to setup, but, when you manage finally manage to complete writing your custom task, it can still save you an absolute shit load of time!