This document discusses JavaScript build automation using NPM scripts and task runners like Gulp. It explains why build automation is useful, providing consistent and repeatable processes to compile code, run tests, and deploy applications. NPM scripts provide basic automation capabilities using shell commands, while task runners like Gulp allow composing complex build pipelines with parallel tasks using JavaScript. The document provides examples of NPM script and Gulpfile configurations for common build tasks like compilation, minification, testing and more.

1. JavaScript Build Automation
Scripts & Task Runners

2. • In General: Why, What, How?
• Automation with NPM Scripts
• Automation with Task Runners (Gulp)
JavaScript Build Automation

3. Build automation is the process of automating the
creation of a software build and the associated
processes including: compiling computer source code into
binary code, packaging binary code, and running
automated tests.
— Wikipedia

4. Why?

5. Not Waste Time for the Same
Process

6. Example: Preparing HTML/CSS/JS for
Production
• JS Compilation (TS || ES6 -> ES5)
• Minify
• Concat
• Styles Compilation (Sass || Less -> Css)
• Css Vendor Prefixes && Optimization
• Separately Handling Vendor and Custom Code
• Auto Injecting Files into HTML
• Running Tests
• Push to Production
• …

7. Example: Awesome Development
Environment
• Browser Live Reloading, File Watching
• JS Compilation
• Styles Compilation
• Linting
• Running Tests
• HTML Injection

8. Automate Tasks
Code Quality Tests Build Pipeline

9. What’s in It for You?
Improve Quality Deliver Faster
Repeatable
and Consistent

10. Automated Build Pipeline
Develop -> Analyze -> Test -> Build -> Deploy

11. Work Smarter, Not Harder

12. Automation with NPM Scripts
{
"name": "npm-scripts-tests",
"version": "1.0.0",
"scripts": {
"start": "node server.js",
"build": "tsc --out app.js"
},
"devDependencies": {
...
}
}

13. Automation with NPM Scripts
{
"name": "npm-scripts-tests",
"version": "1.0.1",
"scripts": {
"build:prod:libs": "bowcat libs.js && uglifyjs lib.js --compress --
mangle --output lib.js",
"build:prod:app": "tsc --out app.js && uglifyjs app.js --compress --
mangle --output app.js",
"build:prod:css": "node-sass src/styles/app.scss --recursive --output-
style compressed --output app.css",
"build:prod": "parallelshell "npm run build:prod:libs" "npm run
build:prod:app" "npm run build:prod:css"",
"build:dev:libs": "bowcat libs.js",
"build:dev:app": "tsc --out app.js",
"build:dev:css": "node-sass src/styles/app.scss --recursive --output-
style compressed --output app.css",
"build:dev": "parallelshell "npm run build:dev:libs" "npm run
build:dev:app" "npm run build:dev:css""
},
"devDependencies": {
...
}
}

14. Demo

15. Automation with NPM Scripts
• Build Steps as Shell Commands
• Don't Have the Complexity of a Full Build Tool.
• No Need to Install an Additional Command-line
Tool to Run Your Build.

16. Automation with Task Runners
http://gruntjs.comhttp://gulpjs.com

17. Gulp vs Grunt
• Code over Configuration
• More Compact Config
• VFS: No Temp Folders
• Streams Parallelism

18. Automation with Task Runners
• The Full Power of Node and JavaScript
• Consistent APIs Optimized for Composing Build
Tasks
• Huge Ecosystems of Plugins
• Avoid Cross-platform Compatibility Problems

19. Typical Gulp Task
File System -> Read Files -> Modify -> Modify ->
-> Modify -> Write Files -> Dest

20. Gulpfile.js
gulp.task('js', function() {
return gulp
.src('**/*.js')
.pipe($.eslint())
.pipe($.concat())
.pipe($.uglify())
.pipe(gulp.dest('./build/'))
})

21. Demo

22. Useful Links: NPM Scripts vs Task
Runners
• Build Tools vs npm Scripts: Why Not Both?
• Give Grunt the Boot! A Guide to Using npm as a Build Tool
• How to Use npm as a Build Tool
• Task Automation with npm Run
• Using npm as a Build System for Your next Project

23. Useful Resources to Learn
• Whole Picture [read]
• learn.javascript.ru Screen Cast Gulp [watch]
• Getting Started with Gulp [read][$]
• Gulp Basics [watch][$]
• JavaScript Build Automation With Gulp.js [watch][$]
• Learning Gulp - Getting Started with the Front End Factory [read]
• Rapid Gulp [watch][$]
• Using npm as a Task Runner [watch][$]