Automating Your Node Workflow with Gulp and Nodemon
Tags: node, nodemon, javascript, gulp
Published: 2017-02-20 16:47:46

---
title: Automating Your Node Workflow with Gulp and Nodemon
published: true
description: A lovely how-to covering how to automate a modern workflow using gulpfiles and nodemon.
cover_image: https://static.pexels.com/photos/79290/black-and-white-code-programming-tech-79290.jpeg
tags: node, nodemon, javascript, gulp
---

# 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](http://gulpjs.com/), "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](https://dev.to/55sketch) pointed out in the comments, [Bulp](https://chrisdemars.github.io/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](https://www.npmjs.com/package/gulp-sass). Comments added by me.)

```javascript
'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.

```javascript
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](https://nodemon.io/) 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
* [bulp](https://chrisdemars.github.io/bulp/)
* [gulp](http://gulpjs.com/)
* [gulp-sass](https://www.npmjs.com/package/gulp-sass)
* [gulp-coffee](https://github.com/contra/gulp-coffee)
* [nodemon](https://nodemon.io/)