Front end task automation using grunt, yeoman and npm(1)
Front-End Task Automation
Friday, 25 October 13
with Grunt,Bower,Yeoman and NPM
- 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:
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. It was during this time that industry was rapidly
adopting feedback controllers, which were introduced in the
- 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.
Reasons of automation?
- Increase effectiveness, efficiency and coverage.
- Decrease monotonous process which can lead to
- Time saving translates to cost savings
- Because developers are LAZY, and we’d rather play pool
while running the automation….
Old ways of workflow
- Convert PSD to sprite Gifs, Pngs or Jpgs
- Create index.html
- Download external vendors e.g jQuery, jQuery ui, angularJS,
- 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
makes fun of
Automation systems available
- Java ANT - BASH
- RPM - Maven
# ALWAYS OVERWRITE MOST
cat js/app.js > js/site.js
cat js/jQuery.js >> js/site.js
cat js/someMinifiedPlugin.js >>
Whats up Yo?
Yo scaffolds out a new application, from bootstraping
grunt configuration and tasks, installs basic bower
components and CSS
- 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
Installing Yo and
$ npm install –g yo
$ npm install –g generator-angular
$ npm install –g generator-webapp
$ yo webapp
$ yo angular
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.
- 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…..
$ gruntmytask will run all the targets
$ gruntmytask:target will run the specific
target of mytask
- Bower is a package manager for the web.
- Reads from a bower.json file
- Handles dependencies!
$ sudo npm install -g bower
$ bower init
$ bower list
$ bower search
$ bower install bootstrap –save
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.