Let’s talk about tools first
Lately I’ve noticed that many Front-end developers get caught up in tools. Should they use Less, or Sass? Do they code in Sublime or Atom? Or should they pick up Coda 2? What frameworks should they learn? Is Angular worth their time? Or maybe they should go all out on Ember or Backbone.
What is Gulp
After dropping all these tools in the previous paragraphs you might be confused. This article will focus on getting you started with Gulp. But what is Gulp exactly?
Gulp is a task runner, it’s purpose is to perform repetitive tasks for you. When you are developing a website some things you might want to automate are:
- Compiling css
- Refresh your browser
This would be a very basic setup. Some more advanced task include:
- Running jshint
- Generating an icon font
- Using a cachebuster
- Generating spritesheets
And many, many more. The way Gulp does all these things is through plugins. This makes Gulp a very small and lightweight utility that can be expanded with plugins so it does whatever you want. At this time there’s about 1200 plugins available for gulp.
When should I learn Gulp
You should learn Gulp whenever you feel like you are ready for it. When you’re starting out as a front-end developer you will have to learn so many things at once I don’t think there’s much use in immediately jumping in to use Sass, Gulp and all the other great tools that are available. If you feel like you want to learn Sass (or Less) as soon as you start learning css you don’t have to learn Gulp as well. You could manually compile your css files as you go. Or you could use a graphical tool like Codekit for the time being. Like I said, there’s no need to rush in and confuse yourself.
What about Grunt?
For those who payed attention, I mentioned Grunt at the start of this article. I don’t use Grunt for a very simple reason, I don’t like the syntax. And also, Gulp is supposed to be faster so that’s nice. I feel like it’s important to mention this because if you choose to use a tool like Gulp or Grunt you have to feel comfortable. A tool should help you get your job done better; using a tool shouldn’t be a goal in itself.
Creating a gulpfile
The gulpfile is your main file for running and using gulp. Let’s create your first Gulp task!
I’m going to assume you’ve already installed node and npm on your machine. If not go to the node.js website and follow the instructions over there. When you’re done you can come back here to follow along.
To use gulp you need to install it on your machine globally and locally. Let’s do the global install first:
If this doesn’t work at once you might have to use the
sudo prefix to execute this command.
When this is done, you have successfully installed Gulp on your machine! Now let’s do something with it.
Setting up a project
In this example we are going to use gulp for compiling sass to css. Create the following folders/files:
In your style.scss files you could write the following contents:
Allright, we have our setup complete. Let’s set up Gulp for our project.
Setting up Gulp
Let’s start by locally installing gulp for our project:
If you’re more familiar with npm and the
package.json file that you can add to your project you’ll want to run the command with
--save-dev appended to it. That will add gulp as a dependency for your project. This also applies to any plugins you install.
Next up, we install the sass compiler:
We’re all set to actually build our gulpfile now. Add the following code in there:
var gulp = require('gulp');
var sass = require('gulp-sass');
In this file we import gulp and the gulp sass module. Then we define a task, we call the task css. Inside of this task we take our style.scss file and
pipe it through to the sass plugin. What happens here is that the sass plugin modifies the stream that was created when we loaded
sass/style.scss. When the sass plugin is done it sends the stream on to the next pipe call. This time we call
gulp.dest to save the output of our stream to the css folder.
Think of this process as an assembly line for your files. You put the raw file in on one end, apply some plugins to it in order to build your final file and then at the end you save your output to a file.
The second task we define is called watch. This is the task we’re going to start from the command line in a bit. What happens in this task is that we tell gulp to watch everything we have in our sass folder, as long as it ends in
.scss. When something changes, Gulp will start the css task.
Go back to your command line and type:
Now go to your
style.scss file, change something and save it (or just save it). You should see something happening in the command line now.
[20:54:17] Starting 'css'...
[20:54:17] Finished 'css' after 3.63 ms
That’s the output I get. If you check the css folder, there should be a css file in there. You just generated that file! That’s all there is to it.
Now that you’ve learned to compile sass files into css files with gulp you can start doing more advanced things. Gulps powerful syntax shouldn’t make it too hard to expand on this example. Usually you just add an extra
pipe to your file, call the plugin you want, repeat that a few times and then eventually you save the output file.
I hope this guide to getting started with gulp is helpful to you. If you have notes for me, questions or just want to chat you can send me a tweet @donnywals