Creating a JavaScript Development Environment: Automation

coryWelcome 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.

Continue to Part 6: Transpiling

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s