Welcome to Part 3 of this review of the Pluralsight course Building Web Applications with Node.js and Express 4.0 by Jonathan Mills.
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.
Setting Up Gulp
What is Gulp?
Gulp is a task manager for web projects.
It is installed with NPM.
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.
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 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 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.
We see a problem related to a new version of 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
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.
Part 4 – Templating Engines is coming soon