Notes from Rob Dudley, Rocket-Powered Ramp Up with Front-end Automation Tools, 1 October 2014
Pre-requisites: node.js and npm
Front-end package manager (getting contained consistent copies – technically app store is a package manager)
Has search command, also a repo online
jQuery, Bootstrap, Underscore
$bower init creates bower JSON that specifies dependencies. Set private to true if you don’t intend to put the package in the Bower repo.
--save-dev on install saves it in the JSON.
$bower home gives you info on a package
Superseded twice over
Need to install grunt-cli and grunt separately
JSHint, uglify, concat, watch
Gruntfile.js reads package.json
$grunt – runs default task
$grunt <task> – runs particular task
Which plugin to use?
– Only load a plugin that does what you need it to do
– “Contrib” are official – kept up to date and always work
– Live reload and grunt concurrent are useful
– Bower first – swap jQuery etc. out and replace with Bower versions.
– Grunt – minification, then SASS
– Yeoman for repeated tasks
– Build incrementally
You don’t commit node_modules, just the JSON. Suggests committing built assets.
What if you want to put them on CDN? – Bower will put it locally, so you have to get round it by swapping files out in a grunt task.