Js Automation. npm scripts & Gulp

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][$]