Chapter 6. Gulp – Automating Tasks for a Faster Workflow

From this point onwards, almost everything we do will be for our actual project. We'll be creating the homepage for a busy, content-rich website. Content-rich like a blog, a news website, or a tutorials website. We'll write mixins and functions which will be used throughout our project. Some of these will simply be for small design elements and others will be for large components, or features such as media queries and a custom built grid system.

However, before we get to actually writing code for our project we're going to look at removing and automating the repetitive tasks. Think about how many times we've had to run compass compile, or the sass --watch commands. Then we need to switch to our browser and hit F5 or click Refresh to see the changes. Then we jump to our editor and make some changes and repeat.

So, in this chapter we'll focus on setting up our project to use GulpJS to make our task easier and less repetitive from this...

Setting up our project

First thing we need to do is create our project's folder structure from scratch. We'll follow the SMACSS style and group each part in its own folder, which will contain its partials. The main Sass file style.scss will import all of the other files. This file will act as our table of contents for where our files are and in what order they're loaded. We'll also maintain an actual table of contents, so we can easily see where each section is when looking at this file.

Creating our folder and files

We're going to use Compass to bootstrap our project structure. This will create our project folder, our scss folder, and our css folder, and generate some files for us too. Let's refresh our memories on how to do this by running compass help create (create being the command which will generate our project folder):

compass help create

Here we can see a list of the options we can use to create our project folder just the way we want it. We're going to specify the folders we want...

Why Gulp and not Grunt?

When I started out with task runners it was way back when Grunt first hit the scene and Gulp wasn't even a thing yet. Grunt has changed quite a bit since then and other tools like Yeoman have arrived on the scene as well as Gulp.

When I tried Grunt back then it was lost on me. I liked the idea of not having to refresh my browser and only having to run one command to do lots and lots of different things, but because I didn't understand how you did any of this before Grunt. I felt like the setup of Grunt, the Grunt CLI, and then all those brackets, were overly complex.

That was entirely because I had no experience with NodeJS before trying Grunt. When something went wrong (and things went wrong for me often) I had no concept of why it might be going wrong. I didn't have any comprehension of the technology behind Grunt. Most of the time it was a Node problem, or rather a problem with one of the many packages Grunt was using, and my system not installing things properly...

Node and npm

Before we look at Gulp I want to look at Node and npm first. Like I said, a lot of the problems I've encountered have actually been more easily solved once I understood, after understanding what Gulp is built on. So that means understanding how Node and npm can be used to run and automate tasks.

Let's set up our project for Node using npm init. From the root of our mastering-sass-swag run:

npm init

This will then ask you to fill in a series of fields which npm uses to generate the package.json file. Those fields and what you should type are as follows:

name: mastering-sass-swag 
version: 1.0.0 
description: Front-end for Mastering Sass Swag 
entry point: index.js 
test command: 
git repository: 
author: Your Name 
license: ISC 

When asked "Is this ok? (yes)", hit Enter to accept. If you made any mistakes, or you want to change something, you can always open up package.json and make your modifications there. In fact, open up package.json...

Node.js, node-sass, and fileWatch

Using npm to run shell commands is all well and good, but as you can imagine it has its limits. When you want to really complicate things, you'll need to start writing tasks in Node.js. To do this we'll need that index.js file we specified in our package.json entry point field.

Create a file called index.js. Next we'll need to download a package which compiles watches our Sass files. The package is node-sass. The node-sass is a Node "wrapper" of the LibSass port of Sass. This means we write code familiar to Node which then uses LibSass to actually compile and do whatever else we ask.

So first we'll run the command to download and install node-sass into our project:

npm install node-sass --save-dev

This tells npm to download/install the node-sass package from the npm registry. The --save-dev flag tells it to automatically add it to our package.json file for us as a development dependency. This means this package is only necessary while we develop our site,...

Setting up Gulp

The first thing we need to do to use Gulp in our project is install it in our dev-dependencies. We do this using npm install:

npm install --save-dev gulp

Once gulp is installed, our next step is changing our package.json file so our main script is gulpfile.js instead of index.js:

// mastering-sass-swag/package.json 
"main": "gulpfile.js", 

We're going to delete our config.rb file. Surprised? We'll, we're not going to be running commands like compass watch or compass compile so we won't need the config.rb file. Instead we're going to do everything from this point on through Gulp. So keeping config.rb would just confuse things:

rm config.rb

We can also delete index.js at this point for the same reasons:

rm index.js

Next we need to create the gulpfile.js where we will add all of our Gulp tasks. Create a file gulpfile.js in the root of our project, and inside add the following:

// mastering-sass-swag/gulpfile.js 
'use strict'; 
var gulp = require('gulp'); &...

Summary

In this chapter we've begun setting up our main project, Mastering Sass Swag, which we'll work on from here on out. We also set up the main directory structure we'll use for this project. We took a quick look at using npm and node to compile and watch Sass using node-sass, which is a LibSass wrapper for node-based projects.

Then we looked at installing and configuring Gulp for our project. We saw how to install and set up numerous Gulp plugins, each with a specific purpose such as gulp-ruby-sass, gulp-sourcemaps, and browsersync to live reload our browser on changes to our files.

In the next chapter, we'll finally look at sourcemaps so you can see what the big deal is and why we put in the effort to get them working in this chapter.