Js Automation. npm scripts & Gulp
2 likes201 views
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.
![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][$]](https://image.slidesharecdn.com/js-automation-160727125618/85/Js-Automation-npm-scripts-Gulp-23-320.jpg)
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][$]