DEV Community

Cover image for Automating Your Node Workflow with Gulp and Nodemon
ZakG
ZakG

Posted on

Automating Your Node Workflow with Gulp and Nodemon

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
Enter fullscreen mode Exit fullscreen mode

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']);
});
Enter fullscreen mode Exit fullscreen mode

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']);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

nodemon index.js
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
55sketch profile image
Nick Moreton

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.

Collapse
zak profile image
ZakG Author

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!

Collapse
55sketch profile image
Nick Moreton

Ah yeah I was struggling to think how to rephrase it - 'projects' is perfect

Collapse
antonk52 profile image
Anton Kastritskiy

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