cfObjective 2014 talk slides on how to automate front-end workflows with Grunt, Sass, Browser-Sync, Yeoman, Alfred, application launchers, and the like.
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
$ sudo apt-get install ruby1.9.1 $ sudo yum install ruby1.9.1 RVM RUBY VERSION MANAGER https://rvm.io/rvm/install Install ruby in different ways on Linux Linux
$ sudo apt-get install ruby1.9.1 $ sudo yum install ruby1.9.1 RVM RUBY VERSION MANAGER https://rvm.io/rvm/install Install ruby in different ways on Linux Linux
(location.host || 'localhost').split(':') [0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> If you don’t use browser plugins, you need this JS for LiveReload
+ (location.host || 'localhost').split(':') [0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> </cfoutput> If you don’t use browser plugins, you need this JS for LiveReload
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
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
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
[BS] Copy the following snippet into your website, just before the closing </ body> tag <script src='//192.168.5.6:3000/socket.io/socket.io.js'></script> <script>var ___socket___ = io.connect('http://192.168.5.6:3000');</script> <script src='//192.168.5.6:3001/client/browser-sync-client.0.7.0.js'></script> [BS] Watching files...
"node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.7.2", "grunt-contrib-watch": "~0.5.3", } } This is what a package.json file looks like
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
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
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']);
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
kitt
ymd65536
getty708
meteatamel
nobu74658
hanon52_
saitoryc
rkaga
takathemax
cp20
izumin5210
fadis
nealle
lauravandoore
chrislema
bkeepers
wjessup
kneath
eileencodes
eitanlees
tammielis
malarkey
lara
panda_program
addyosmani
![Kitt Hodsden • @kitt • http://ki.tt/cfo 122 grunt.registerTask('gogogo', ['browserSync', 'watch']);](https://files.speakerdeck.com/presentations/847aa0a0c0270131c6fd6e60aac3aa95/slide_121.jpg){kind=link}
![Kitt Hodsden • @kitt • http://ki.tt/cfo 193 dev[405]% grep background-color](https://files.speakerdeck.com/presentations/847aa0a0c0270131c6fd6e60aac3aa95/slide_192.jpg){kind=link}
