1. Front-End Task Automation
Friday, 25 October 13
with Grunt,Bower,Yeoman and NPM

2. 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:

3. What is automation?
- The term automation, inspired by the earlier word
Automatic (coming from automaton), was not widely used
before 1947, when General Motors established the automation
department.[1] It was during this time that industry was rapidly
adopting 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.

4. 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….

5. 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/

6. time
spe
nt
task
size
non-
geek
gee
k
does it
manually
makes fun of
geek’s
lose
s
gets
annoy
ed
writes
script to
automate win
s

7. Automation systems available
- Java ANT - BASH
- RPM - Maven
- Make
#!/bin/bash
# ALWAYS OVERWRITE MOST
RECENT
cat js/app.js > js/site.js
# PLUGINS
cat js/jQuery.js >> js/site.js
cat 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/

8. Not all developer can write bash

9. New workflow for lazy
developers

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

11. Usage
$ npm init
$ npm info bower
$ npm install –g bower
$ npm install bower –save-dev
$ npm update

12. package.json

13. Yeoman
Modern workflow for modern web apps

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

15. Installing Yo and
generators
$ npm install –g yo
$ npm install –g generator-angular
$ npm install –g generator-webapp
$ yo webapp
$ yo angular

16. GRUNT
The JavaScript Task Runner

17. 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…..

18. Installing Grunt
$ npm install grunt –save-dev
$ npm install grunt-cli –save-dev

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

20. $ gruntmytask will run all the targets
of mytask
$ gruntmytask:target will run the specific
target of mytask
$ gruntclean
$ gruntsass:dev
Executing Builds

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

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

23. Thanks!
Q uestions?