Welcome to Part 3 of this review of the Pluralsight course Building Web Applications with Node.js and Express 4.0 by Jonathan Mills.

Jonathan is a JavaScript and Node.js expert working mostly in the MEAN Stack with individuals and companies to help build their technical skills to cope with the constantly changing landscape of software development.

He is also an ASP.NET insider and an international speaker focusing on JavaScript both in the browser and on the server.

Also in this series:

Part 1 – Getting Started
Part 2 – Setting up Express
Part 3 – Setting Up Gulp

In the last module we saw some of the pain and tedium involved with building a web application in Node.js. Thankfully we can eliminate these problems with Gulp.

This module is intended as a quick introduction to Gulp. For a more in-depth guide to Gulp see John Papa’s course JavaScript Build Automation with Gulp JS. Also check out the environment setup module of Building Applications in React and Flux by Cory House.

Setting Up Gulp

What is Gulp?

Gulp is a task manager for web projects.

It is installed with NPM.

It is very easy to use, and all the configuration is done with JavaScript code.

Gulp is package based.

Coding Standards with JSHint and JSCS

We setup Gulp to use JS Hint to enforce code quality.

JS Hint detects potential errors, enforces coding conventions, is easily configurable, and is open source.

We will also use JSCS, which is about coding styles rather than coding standards.

Jonathan has created a CodingStandards project on Github which contains a .jscsrc file and a .jshintrc file.

You can use these straight away by downloading them and moving them into your project.

We see that JSCS for Brackets and JSHint for Brackets are installed, and Jonathan explains that this is setup in brackets.json.

When we tell the editor that our code is JavaScript, we see a list of JSCS problems.

We want to enforce this checking in our build.

JSCS in Gulp

To install gulp, type this into your command prompt:

npm install -g gulp

npm install gulp –save-dev

This adds a devDependencies section to our package.json.

Next we create gulpfile.js and write our gulp code in here.

We create a gulp task called style, which pulls in all of our own JavaScript files and checks the style used in them.

We also pipe our data to JSHint. This involves installing gulp-jshint, gulp-jscs and jshint-stylish

npm install –save gulp-jshint gulp-jscs jshint-stylish

Now if we type gulp style into the command prompt, it does all of the style checking for us.

This is just the first piece in what will be a series of automated events.

Setting up Wiredep

We want Gulp do act on all of our CSS and JavaScript files. We don’t want to keep manually updating our index.html.

We see how to make Gulp inject our bower packages into our HTML automatically using Wiredep.

This involves writing a new gulp task called inject.

Wiredep works by looking at the dependencies section in our bower.json file. We create an options object that specifies the bowerJson and directory properties.

We must also add bower comments into our index.html to mark the locations where our script references are injected.

Once our gulp file is updated with our inject task, we can type gulp inject to inject our JavaScript and CSS files.

We see a problem related to a new version of Bootstrap.

Fixing Bootstrap

Wiredep stopped working due to a change to the Bower spec. It now prefers that we include, in our main section in bower.json, our sources and not our distributed files.

We see bootstrap.less is listed instead of bootstrap.css.

Because of this we need to tell wiredep where that CSS file is. We can do this by using an override, and Jonathan shows us a block of code specifying our overrides for Bootstrap.

We also update our wiredep options adding ignorePath.

Setting up Gulp-inject

We can use gulp-inject to take our CSS and JavaScript and inject it so that all of our dependencies including both the bower dependencies and our local dependencies.

npm install gulp-inject –save-dev

We see that gulp-inject is added to our devDependencies.

Next we update our inject task in our gulpfile.

Gulp makes use of pipes for streaming data that needs to be processed, and here we pipe our inject function.

We also create two new variables, injectSrc and injectOptions, and add comments into our index.html

When we run it we see it injects two files into index.html

We still need to type the command to do this, and we want it to be automatic, so next let’s look at nodemon.

Working with Nodemon

Nodemon monitors our files for us and automatically restarts our server for us when anything changes.

To install Nodemon:

npm install –save-dev gulp-nodemon

Once installed we create another gulp task called ‘serve’. We pass in our ‘style’ and ‘inject’ tasks as an array argument.

When we type gulp serve in the command line it’s going to run style and inject tasks before it’ll run our serve task.

We create an options object containing script, delayTime, env and watch properties. env is another object containing ‘PORT’.

By the end of this lesson we have our app running on port 3000 due to our Nodemon settings.

Jonathan also covers Nodemon in the Production Code module of his JavaScript Best Practices course.

Part 4 – Templating Engines is coming soon