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.
Top comments (4)
Nice tutorial - I found Bulp to be a great starting point if you're after a boilerplate gulp file.
Not a criticism of you, as we all tend to think this way these days, but one thing I would pick up on is:
"Most pages require SASS or LESS, Bower, Browserify, maybe a compiler if you're writing in CoffeeScript or Typescript, and the list goes on."
In fact, it is we the developers who require those things - Those tools make our lives easier, and it's very easy for us to get lost in our own workflows and forget that all the browser/page requires is HTML, along with some optional CSS and JavaScript.
There's definitely value in carefully considering what tools to use, and often keeping things as simple as possible leads to a lot less headaches! That's why I think Bulp is a great starting point for this stuff - it really helped me get my head around Gulp by keeping it simple.
That's a valid point, I went ahead and changed it to say that "Most projects depend on...".
Also, thanks for the note on Bulp. I'd never heard of it before, but I threw in a note about it for anyone that's interested.
Thanks for the feedback!
Ah yeah I was struggling to think how to rephrase it - 'projects' is perfect
I believe at this point it would make sense to use es6 syntax at least on the server side, use const when defining modules as those will stay the same throughout your logic and arrow functions for tasks' callbacks. Maybe this is my personal preference, but I believe using const at least can prevent a newcomer from accidentally redefining a module later on