Front end task automation using grunt, yeoman and npm(1)
-
Upload
frank-marcelo -
Category
Technology
-
view
108 -
download
3
description
Transcript of Front end task automation using grunt, yeoman and npm(1)
![Page 1: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/1.jpg)
Front-End Task
Automation
Friday, 25 October 13
with Grunt,Bower,Yeoman and
NPM
![Page 2: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/2.jpg)
Agenda
Overview: - What is automation - Reasons of automation - Old ways of workflow - Automation systems available
Demonstration of NPM, Grunt, Yeoman and Bower:
Application to Learning Management System:
![Page 3: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/3.jpg)
What is automation? - The term automation, inspired by the earlier wordAutomatic (coming from automaton), was not widely usedbefore 1947, when General Motors established the automation department.[1] It was during this time that industry was rapidlyadopting feedback controllers, which were introduced in the 1930s.
- The technique, method, or system of operating or controlling a process by highly automatic means, as by electronic devices, reducing human intervention to a minimum.
- Simply make the system work automatically.
![Page 4: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/4.jpg)
Reasons of automation? - Increase effectiveness, efficiency and coverage. - Decrease monotonous process which can lead to unexpected mistake. - Time saving translates to cost savings - Because developers are LAZY, and we’d rather play pool while running the automation….
![Page 5: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/5.jpg)
Old ways of workflow - Scaffolding - Convert PSD to sprite Gifs, Pngs or Jpgs - Create index.html - Download external vendors e.g jQuery, jQuery ui, angularJS, Bootstrap - Reference the vendors inside the “href” - Open browser, test and do tweaks and reload browser
It would be +1 if the dev is doing some compression or minify on CSS, Javascript or assets with YUI Compressor or UglifyJS.
http://yui.github.io/yuicompressor/
![Page 6: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/6.jpg)
time spent
task size
non-geek
geek
does it manually
makes fun of geek’s
loses
gets annoyed
writes script to automate wi
ns
![Page 7: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/7.jpg)
Automation systems
available - Java ANT - BASH - RPM - Maven - Make
#!/bin/bash
# ALWAYS OVERWRITE MOST RECENTcat js/app.js > js/site.js
# PLUGINScat js/jQuery.js >> js/site.jscat js/someMinifiedPlugin.js >> js/site.js
$ ./pack.sh
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
![Page 8: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/8.jpg)
Not all developer can write
bash
![Page 9: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/9.jpg)
New workflow for lazy
developers
![Page 10: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/10.jpg)
Is a package manager that installs, publishes and manages node programs written in javascript and runs under Node.js platform.
Download and install Node.js from http://nodejs.org
![Page 11: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/11.jpg)
Usage
$ npm init
$ npm info bower
$ npm install –g bower
$ npm install bower –save-dev
$ npm update
![Page 12: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/12.jpg)
package.json
![Page 13: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/13.jpg)
YeomanModern workflow for modern web
apps
![Page 14: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/14.jpg)
Whats up Yo?
http://yeoman.io/whyyeoman.html
Yo scaffolds out a new application, from bootstraping grunt configuration and tasks, installs basic bower components and CSS
Features:
- Fast scaffolding - Generators for BackboneJS, EmberJS and AngularJS - Automatically compiles Coffeescripts & Compass - Killer package management using Bower - Run’s headless browser unit testing using PhantomJS
![Page 15: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/15.jpg)
Installing Yo and generators
$ npm install –g yo
$ npm install –g generator-angular
$ npm install –g generator-webapp
$ yo webapp
$ yo angular
![Page 16: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/16.jpg)
GRUNTThe JavaScript Task Runner
![Page 17: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/17.jpg)
Grunt is a way to automate operations and to performing repetitive tasks. Once you have done the configuration the less work you have to do when doing minification, compilation, deployment, unit testing, image optimisation and etc.
Task Runner
Features:
- Unit Testing - Cache busting with revisions - CSS Compressor - JS Linting - Concatenation - Watch files for live reload - Uglify - Set up proxy server - Image Optimisation - Execute linux command - A lot more…..
![Page 18: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/18.jpg)
Installing Grunt
$ npm install grunt –save-dev
$ npm install grunt-cli –save-dev
![Page 19: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/19.jpg)
Gruntfile.json
module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: 'dist/myfile.js', dest: 'dist/myfile.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']);};
Sample minify with Grunt
![Page 20: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/20.jpg)
$ grunt mytask will run all the targets of mytask
$ grunt mytask:target will run the specific target of mytask
$ grunt clean $ grunt sass:dev
Executing Builds
![Page 21: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/21.jpg)
- Bower is a package manager for the web. - Reads from a bower.json file- Handles dependencies!
Installation
$ sudo npm install -g bower$ bower init$ bower list$ bower search$ bower install bootstrap –save
Bower
![Page 22: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/22.jpg)
Bower.json
{ "dependencies": { "bootstrap": "~3.0.2" }}Composer does 2 things:1) Downloads libraries and their dependencies.2) Sets up autoloading so you don’t need “require” statements
Bower only does number 1.
![Page 23: Front end task automation using grunt, yeoman and npm(1)](https://reader036.fdocuments.us/reader036/viewer/2022062617/54c739214a795937458b4579/html5/thumbnails/23.jpg)
Thanks!Q uestions?