Using gulp at MakeUseOf

14 Mar 2014

At MakeUseOf, since the start of the new theme, we simply wrote plain 'ol CSS and normal JS. No cool stuff like concatenation of compression or minification. Plain code, edited and uploaded through Filezilla.

Now we've moved on to a better workflow - Using gulp, Vagrant, git & Github. Here I'll talk about how we set up and use gulp.

Setting up gulp

Setting up gulp was surprisingly extremely easy. I just ran these two commands:

$ npm init
$ npm install gulp -g
$ npm install gulp --save-dev

And gulp was ready to go. To avoid syncing useless stuff, I added node_modules to .gitignore (And James reminded me to add .sass-cache as well).

The src and dest variables are set so that I can easily use either in the main function.

gulp works through piping files (Can be in an array, can use the wildcard, etc) through a series of plugins. Each plugin can have specific settings with it, passed as arguments. If you're familiar with jQuery, gulp should be pretty easy to understand and write.

Scripts

Our goal with scripts was simply - Compressing them, and allowing use of includes.