Disclaimer

Allow me to preface this article by saying that I am a newcomer to web development, and most of the veterans here will likely already know these skills. However, these are things that I found incredibly useful when I set out to make a professional website for myself, and hopefully any other newbies looking for help will find this information useful as well.

What is this "gulp" of which you speak?

According to their website, "gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something." In fewer words, gulp is a task runner that can save you boatloads of time and stress.

Okay, why do I need it?

Developing a modern website is no simple task. Most projects use SASS or LESS, Bower, Browserify, maybe a compiler if you're writing in CoffeeScript or Typescript, and the list goes on. It's a giant pain to have to constantly compile your stylesheets or javascript after each tiny change. Sure, some of these technologies offer some sort of "watch" functionality, but you'll still have several of those running at the same time. Gulp allows you to bring all of these things into one task, recompiling any styles or scripts that you may have every time you make a change.

Alrighty, I'm sold. Now how do I do it?

EDIT: As Nick Moreton pointed out in the comments, Bulp is a package that offers an easily configurable boilerplate gulpfile to help you get started. If you'd rather not write your tasks completely from scratch, go check it out.

First off, you'll need to install gulp. This can be done via npm, like most things nowadays.



npm install gulp-cli -g

All of your gulp tasks are stored in what is known as a gulpfile, usually titled gulpfile.js. The following is an example of a gulp task that compiles scss styles. (Example source found here. Comments added by me.)



' use strict ' ; var gulp = require ( ' gulp ' ); //This is another package to install via npm var sass = require ( ' gulp-sass ' ); gulp . task ( ' sass ' , function (){ // '**/*.scss' recursively searches the specified directory for any files // with the .scss file extension. return gulp . src ( ' ./sass/**/*.scss ' ) . pipe ( sass (). on ( ' error ' , sass . logError )) //define error behavior . pipe ( gulp . dest ( ' ./css ' )); //specify compile destination }); //This task watches for any changes to .scss files in the directory and // runs the 'sass' task defined above whenever a change is detected. gulp . task ( ' sass:watch ' , function (){ gulp . watch ( ' ./sass/**/*.scss ' , [ ' sass ' ]); });

There are a plethora of "gulp-whatever" packages that will allow you to automate almost any task. Below is an example of a set of tasks that automate the development of a webpage written with coffeescript.



var gulp = require ( ' gulp ' ); var sass = require ( ' gulp-sass ' ); var coffee = require ( ' gulp-coffee ' ); gulp . task ( ' sass ' , function (){ return gulp . src ( ' ./styles/**/*.scss ' ) . pipe ( sass (). on ( ' error ' , sass . logError )) . pipe ( gulp . dest ( ' ./css ' )); }); gulp . task ( ' sass-dev ' , function (){ gulp . watch ( ' ./styles/**/*.scss ' , [ ' sass ' ]); }); gulp . task ( ' coffee ' , function (){ return gulp . src ( ' ./app/**/*.coffee ' ) . pipe ( coffee ({ bare : true })) . pipe ( gulp . dest ( ' ./js ' )); }); gulp . task ( ' coffee-dev ' , function (){ gulp . watch ( ' ./app/**/*.coffee ' , [ ' coffee ' ]); }); // This means that the when 'gulp dev' is run, it runs the // sass-dev and coffee-dev tasks gulp . task ( ' dev ' , [ ' sass-dev ' , ' coffee-dev ' ]);

With this gulpfile, simply running gulp dev starts watches on all of our styles and coffeescript files. Any changes trigger an automatic recompile, and we don't have to do anything.

But wait, won't we need to restart our node app whenever we change backend code?

Yes, but this is where nodemon comes into play. To use it, first install it via npm.



npm install -g nodemon

Once this is done, we simply start our app with nodemon instead of with node, like so:



nodemon index.js

Nodemon will now monitor our source code, and anytime it sees a change it will automatically restart our app. Pretty sweet, right? Now all we have to do is refresh the webpage to see changes in our front end or our backend.

Further Reading

This was a far from exhaustive explanation of gulp, so if you want to know more about how it works and what it offers, check out their webpage and docs. I've provided links to all of the packages I referenced below, if I peaked your interest, feel free to check them out.

Packages Referenced