cfObjective 2014 talk slides on how to automate front-end workflows with Grunt, Sass, Browser-Sync, Yeoman, Alfred, application launchers, and the like.
Kitt Hodsden • @kitt • http://ki.tt/cfo 14 # mac / linux $ which ruby /usr/local/bin/ruby $ ruby --version ruby 2.0.0p195 # windows > where ruby C:\Ruby200\bin\ruby.exe > ruby --version ruby 2.0.0p451 Yay! Sass installed! See if you already have ruby installed
Kitt Hodsden • @kitt • http://ki.tt/cfo 20 RUBYINSTALLER http://rubyinstaller.org/downloads/ PIK https://github.com/vertiginous/pik Install ruby in different ways on Windows Windows
Kitt Hodsden • @kitt • http://ki.tt/cfo 21 RUBYINSTALLER http://rubyinstaller.org/downloads/ PIK https://github.com/vertiginous/pik Install ruby in different ways on Windows Windows CYGWIN http://cygwin.com
Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster 32 What magic do we do?
Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster 33 What magic do we do?
Kitt Hodsden • @kitt • http://ki.tt/cfo 48 document.write('<script src="http://'<br/>+ (location.host || 'localhost').split(':')<br/>[0] + ':35729/livereload.js?snipver=1"></' +<br/>'script>') If you don’t use browser plugins, you need this JS for LiveReload
Kitt Hodsden • @kitt • http://ki.tt/cfo 60 // save this into run-server.js var connect = require('connect'); connect.createServer( connect.static(__dirname) ).listen(8080); If you don’t have a local development environment, use this run-server.js
Kitt Hodsden • @kitt • http://ki.tt/cfo 61 $ npm install connect ... $ node run-server.js # open http://localhost:8080/index.html # control-c to stop If you don’t have a local development environment, install the connect package
Kitt Hodsden • @kitt • http://ki.tt/cfo 62 > npm install connect ... > node run-server.js # open http://127.0.0.1:8080/index.html # control-c to stop If you don’t have a local development environment on Windows, install the connect package
Kitt Hodsden • @kitt • http://ki.tt/cfo http://localhost:8080/index.html http://127.0.0.1:8080/index.html 64 You can see the temporary site running locally!
Kitt Hodsden • @kitt • http://ki.tt/cfo 70 $ browser-sync init [BS] Config file created (bs-config.js) [BS] To use it, in the same directory run: browser-sync $
Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Find grunt plugin* 2. Install with npm install --save-dev 3. Add the task to our Gruntfile.js file 4. Add the tasks to a command 5. Run the command ... 7. Profit! *write if you need to 109 How to add a task to grunt
Kitt Hodsden • @kitt • http://ki.tt/cfo 129 1. Find grunt plugin* 2. Install with npm install --save-dev 3. Add the task to our Gruntfile.js file 4. Add the tasks to a command 5. Run the command ... 7. Profit! *write if you need to
Kitt Hodsden • @kitt • http://ki.tt/cfo 132 ... // load all the grunt modules instead of one each line require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); grunt.registerTask('checkjs', ['jshint']); grunt.registerTask('watchjs', ['jshint', 'watch']); grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);
Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Watch for file changes 2. Compile our Sass to CSS 3. Refresh the browser on change 232 What we want grunt to do.
Kitt Hodsden • @kitt • http://ki.tt/cfo Avoid using tag selectors Use class selectors if you can. 259 https://developers.google.com/speed/docs/best-practices/rendering
Kitt Hodsden • @kitt • http://ki.tt/cfo 272 What magic do we do? Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster
Kitt Hodsden • @kitt • http://ki.tt/cfo 283 # use a generator $ yo webapp # start the server $ grunt server # run tests $ grunt test # run default $ grunt
Kitt Hodsden • @kitt • http://ki.tt/cfo I skipped over Bundler Managing what ruby gems you have installed http://bundler.io/ Creating your own Grunt tasks http://gruntjs.com/creating-tasks Bower http://bower.io/ 290