Notes from Rob Dudley, Rocket-Powered Ramp Up with Front-end Automation Tools, 1 October 2014
Speaker Slides
Pre-requisites: node.js and npm
Bower
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
or --save-dev
on install saves it in the JSON.
$bower home
gives you info on a package
Grunt
Superseded twice over
JavaScript task runner, massive number of plugins
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
Yeoman
Scaffolding tool
Legacy workflow
– 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.
Questions
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.