Welcome to Part 5 of this review of the Pluralsight course “Creating a JavaScript Development Environment” by Cory House.
Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.
He believes in clean code, pragmatic development, and responsive native UIs.
He has also created reactjsconsulting.com, and has the authored Pluralsight courses including Building Applications with React and Flux and Building Applications with React and Redux in ES6.
Also in this series:
Part 1 – You Need a Starter Kit
Part 2 – Editors and Configuration
Part 3 – Package Management
Part 4 – Development Web Server
Part 5 – Automation
Part 6 – Transpiling
Part 7 – Bundling
Part 8 – Linting
Part 9 – Testing and Continuous Integration
Part 10 – HTTP Calls
Part 11 – Project Structure
Part 12 – Production Build
Part 13 – Production Deploy
Automation
Automation Options
Grunt
The first very popular JavaScript task runner. It is configured via a grunt file, focuses on configuration over code, and has a ton of plugins available for it.
For more on Grunt you can see the Setting Up module of Rob Conery’s Node Application Patterns course
OR watch Shawn Wildermuth’s Large Scale JavaScript on Client and Server
OR watch Steve Ognibene’s TypeScript Build and Test Pipeline module in his Practical TypeScript Migration course
Gulp
Cory sees Gulp as a modern improvement over Grunt. It uses in-memory streams (“pipes”) to eliminate the need to write to disk after each step and improve performance. It uses JavaScript code instead of configuration, and has almost as many plugins as Grunt JS.
For more on Gulp see the Setting Up Gulp JS module in Jonathan Mills “Building Web Applications with Node.js and Express 4.0” or the “Getting Gulp Setup” lesson in his “RESTful Web Services with Node.js and Express” course
npm scripts
Cory has moved on to using npm scripts, which avoids the complexities associated with Grunt and Gulp and all of their plugins. He finds debugging is simpler with npm Scripts, the documentation is better and it’s easier to learn.
Read more at bit.ly/npmvsgulp
Demo: npm Scripts
We go to our package.json and add into the scripts section:
"scripts": {
"start": "node buildScripts/srcServer.js"
}
This saves typing for us. We have created a start alias for the above command and can run srcServer.js just by typing:
> npm start
Cory has more information on using npm scripts in his course Building Applications with React and Redux in ES6.
Demo: Pre/Post Hooks
We create startMessage.js and log a console message here. We can colorize the message using chalk.
Then in our package.json we create a “prestart” alias to run this file. By convention this will run before our “start” script.
Demo: Create Security Check and Share Scripts
We learn how to add a couple more scripts, for running the node security platform, and for sharing our code.
Demo: Concurrent Tasks
We can create a command that runs multiple scripts in parallel. We see how we can run up our web server at the same time as running our security check.
Zombie Code Kill 