How I Got Started with Gulp

Recently I decided to start the inevitable move from (extremely useful) apps like Codekit and MAMP to Gulp. I’m not an expert yet, but I managed to find some good resources for setting things up as well as some solutions for common troubles. I’m posting this as a reference rather than a tutorial.

I resisted the terminal for a while due to the fact that we’ve had literally decades of advancement since the days when a command line was the norm, but these apps make sense when you think about it. Building a utility is one step in development, and building the UI is another. Getting a proper UI for a project would require developers to go through quality assurance and user testing and all sorts of design stuff, and that’s after they’ve finished making the thing work. They don’t want to do all that. They just want to build stuff.

Before Your First Gulp

There are two main configuration files that will be needed for Gulp. Both of them will be created during the tutorial that you’re going to read.

package.json

A general description of this project. It must be present, but you can start it out simple and update as needed. You’ll end up answering some questions in the terminal and the file will be created for you, but if you know the syntax then you can just make it yourself.

gulpfile.js

This file has all the instructions for what Gulp is going to do for us. I’m using a slightly modified version of the one in the tutorial.

Before you can do anything else, Node must be installed. There’s an installer on the official Node site, and you can choose between two versions. I just went with the most recent one. If you already have Node going, then just make sure it’s updated.

For most of the setup, you’ll be following instructions from Travis Maynard, who wrote this excellent article on setting up Gulp. You can just follow along for the entire setup, and he’ll take care of you for the most part.

When you get to the part where you’re installing Gulp itself, you’ll be told to install it globally before installing locally in your project folder. Some people say that you don’t need to do this, but I’m not an expert on this yet so I’m not going to choose a side. You can probably skip the global install, but I didn’t.

Also keep in mind that you’ll have a folder full of node modules in every project folder. It’s possible to set up a common folder for the stuff that you use every time, but it’s not what Gulp wants you to do. Maybe I’ll try that when I’m more familiar with things, but for now I’m just going to go along with what Gulp seems to want. Just be mindful of that folder if you’re using version control. You may or may not want it included.

Watching Files

If you include the ‘watch’ task, then Gulp will keep running in the terminal. When a file in a watched folder gets saved, the ‘watch’ task will run whatever tasks that you’ve assigned to it, like minifying things or compiling your Sass files.

This task will keep watching those folders (or specific files) until you enter Control+C to stop it. If you don’t want to run it that way, then you could just type “gulp” when you want to run your tasks. You’ll wind up with a default task if you read that tutorial, so you don’t have to name it when you enter the command. You still can, though. Just type gulp default to run that task.

Gulp Gotchas

The primary issue that I found was a Travis gives you a line of code to use for installing Gulp packages, but it’s missing a piece. The gulp-jshint plugin has a dependency of jshint. So the big install command needs to include “jshint” in front of “gulp-jshint”. Like this:

npm install jshint gulp-jshint gulp-sass clean-css gulp-clean-css gulp-concat gulp-uglify gulp-rename --save-dev

One needs the other before it can work, so you need both. For an explanation on why that is, see this GitHub issue page.

Another thing to notice is that I added gulp-clean-css to the command. This is how we’re going to minify our CSS, since gulp-uglify only works on JavaScript. You can find docs for that here, and here are the docs for regular clean-css. I’ve added both to the command just like I did with jshint. Just like the other plugins, you’ll need to add a reference to it in your Gulp file. The docs pages have examples, but here’s one to look at while you’re here. You’ll want to tweak it a bit for use in your projects.

var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
// Add other requirements for JS or whatever.
 
gulp.task('sass', function() {
  return gulp.src('scss/styles.scss')
    .pipe(sass())
    .pipe(rename(styles.min.css))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});
// Then add the other tasks you have.

Permission Errors

It’s possible that you’ll get a EACCES error when you install things. It’s mainly a global installation problem, so you might not have any trouble if you skipped that part. If you do get the error, then there’s a handy-dandy way of solving it so you don’t have to go around throwing sudo at everything. The NPM docs provide a solution right here, but please do as the lady says. Take the five minutes and watch the whole thing before you proceed, and especially take the time to read the text below the video. There’s a mention at the bottom of just using Homebrew to install Node because it sets things up for you. Of course, getting Homebrew started is outside the scope of this article. Like anything with the terminal, it’s supposed to be easy but might throw an error just for you personally.

I used the second method from the vidwo and made my own global folder. That seemed less invasive than messing with the default folders even though I’m the only one doing this stuff on my computer.

There’s yet another snag, however. The narrator mostly takes care of you, but she sort of assumes that you know how to edit text files in the Terminal. It’s not intuitive and it’s not mentioned, but Stack Overflow comes to the rescue with this list of keyboard commands.

All done

Okay, that’s it. That’s all the stuff I had to do to get things installed. Hopefully this post will point you in the right direction if you have more trouble than I did. Special thanks to Travis Maynard for his tutorial, and more thanks to the folks who help us along at NPM and Stack Overflow.