FoWA London 2014 Notes: Rob Dudley on Front-End Automation Tools

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.

Advertisements

About Jennifer Phillips Campbell

Software Developer and Medieval Historian
This entry was posted in Future of Web Apps. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s