Menu

Recently I decided to move away from my admittedly minimalistic use of Grunt to Gulp and now I can’t seem to start a project without it. In this guide I will show you how to get started with your own magnificent journey with Gulp.

So what is this Gulp thing all about?

Gulp refers to itself as:

The streaming build system

Basically it can be used to handle all those mundane little tasks that we do need to run/perform, but often skip due to aforementioned mundaneness. Below is only a few tasks that Gulp is able to run, but it should provide enough of an overview to get you excited:

  • Minify CSS and JS files.
  • Concatenate files.
  • Compile LESS, SASS, CoffeeScript, etc.
  • Optimize images.
  • Lint JS files.
  • And even livereload.

So how is this different from Grunt?

It’s true that the functionality between Grunt and Gulp is the same, but I find Gulp much easier to use. Due to its way of handling files via streams the code is a lot cleaner and easier to understand. Let me show you:

Grunt

Gulp

The above code shows how you would minify your CSS with both Grunt and Gulp. As you can see the Gulp syntax is cleaner, easier to understand, and a couple of lines shorter (This might not seem like much, but believe me this saving adds up the more complicated your build script).

Enough Talking! Show me how it is done!

Ok ok ok…Jeez. Impatient reader!

Before we continue make sure you have NodeJS installed. The procedure is beyond the scope of this tutorial, but you can visit the NodeJS website for a guide.

The first thing is to get Gulp installed. Luckily the modern interwebs and extremely creative and talented people make this easy. Just run the following command in terminal:

Now in a new directory enter the following command:

Followed by this:

Gulp by itself is not too useful so we have to install a couple of plugins which we will use to minify our CSS and JS, autoprefix our CSS, and optimize any images we might have. (If this seems like to much effort, don’t worry, there is a link to the source at the bottom of the post.)

We need to load all the plugins we installed earlier. Add the following to the Gulp file:

Before we continue, let’s evaluate and lay out exactly what we need done. Firstly, we require a task that will autoprefix and minify our CSS. Secondly, we also require a task that will minify our JS. And lastly, we need a task that will optimise any images we might have. Below is the code for all the tasks described above:

CSS

JS

Images

Running the above tasks is as easy as:

What if files are removed? How do we keep our destination directories clean? Again, there is a way with Gulp. Let me show you the light:

Default Task

Running all those tasks every time you make changes will minimise your productivity. What if there was a way to run all the required tasks with one command? Well, the great people at Gulp have you covered. Add the following to gulpfile.js.

Now running all the tasks we have created is as easy as:

Quite sleek right?

But I still have to run a command every time I change a file…

Don’t worry. I was getting to that. Gulp has built in features to watch files and run specified commands if it does pick up a change. Add the following to gulpfile.js:

There’s still the problem of constantly having to refresh the browser…

There is just no pleasing you, is there? Well even this is a problem Gulp is able to solve. We will however have to install an additional package. Run the following command:

Now change the section where we load the Gulp plugins to the following:

And finally, add the following at the end of the watch function created above:

Once you have set your browser’s livereload plugin to connect after running the watch task it will now automatically refresh the page.

Conclusion

By now you should already have an idea about how easy and powerful Gulp is. I did however only scratch the surface with this guide. I suggest you check out the Gulp website and the plugins directory to see what else it can do.

Source

As promised, I created a little GitHub repo for this tutorial so you can download the source from there.

Comments (0)

Leave a comment

Your email address will not be published. Required fields are marked *

fourteen − five =