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 http://ki.tt/s223
$ 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 http://ki.tt/s223
(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
[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 110 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']);
alias d='dirs -v' alias pu='pushd' alias po='popd' alias sa='source ~/.bash_profile' alias pdw='pwd' alias purge='rm *.~*~' alias mroe='more' alias memacs='emacs `git st | grep modified | cut -c14-180`' alias sotr='pushd ~/talks/2014/sotr' Create aliases
“make the resize dir 640x480” mkdir 640x480 echo “resize each file” for file in *.jpg; echo “ resizing $file” do convert $file -resize 640x480 640x480/$file; done A bash script to convert
echo “make the resize dir 640x480” mkdir 640x480 echo “resize each file” for file in *.jpg; echo “ resizing $file” do convert $file -resize 640x480 640x480/$file; done A bash script to convert
browser: webkit: "phantomjs" # gecko: "slimerjs" #If you want to have multiple snapping files, set the file name here snap_file: "js/wraith-snap.js" # Type the name of the directory that shots will be stored in directory: - 'shots' # Add only 2 domains, key will act as a label domains: local: "http://localhost:8000" stage: "http://fontsmack.fallgears.com" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 768 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / allthethings: /all-the-things.html phantomcss grunt task
browser: webkit: "phantomjs" # gecko: "slimerjs" #If you want to have multiple snapping files, set the file name here snap_file: "js/wraith-snap.js" # Type the name of the directory that shots will be stored in directory: - 'shots' # Add only 2 domains, key will act as a label domains: local: "http://localhost:8000" stage: "http://fontsmack.fallgears.com" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 768 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / allthethings: /all-the-things.html phantomcss grunt task
browser: webkit: "phantomjs" # gecko: "slimerjs" #If you want to have multiple snapping files, set the file name here snap_file: "js/wraith-snap.js" # Type the name of the directory that shots will be stored in directory: - 'shots' # Add only 2 domains, key will act as a label domains: local: "http://localhost:8000" stage: "http://fontsmack.fallgears.com" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 768 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / allthethings: /all-the-things.html phantomcss grunt task
browser: webkit: "phantomjs" # gecko: "slimerjs" #If you want to have multiple snapping files, set the file name here snap_file: "js/wraith-snap.js" # Type the name of the directory that shots will be stored in directory: - 'shots' # Add only 2 domains, key will act as a label domains: local: "http://localhost:8000" stage: "http://fontsmack.fallgears.com" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 768 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / allthethings: /all-the-things.html phantomcss grunt task
browser: webkit: "phantomjs" # gecko: "slimerjs" #If you want to have multiple snapping files, set the file name here snap_file: "js/wraith-snap.js" # Type the name of the directory that shots will be stored in directory: - 'shots' # Add only 2 domains, key will act as a label domains: local: "http://localhost:8000" stage: "http://fontsmack.fallgears.com" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 768 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / allthethings: /all-the-things.html phantomcss grunt task
browser: webkit: "phantomjs" # gecko: "slimerjs" #If you want to have multiple snapping files, set the file name here snap_file: "js/wraith-snap.js" # Type the name of the directory that shots will be stored in directory: - 'shots' # Add only 2 domains, key will act as a label domains: local: "http://localhost:8000" stage: "http://fontsmack.fallgears.com" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 768 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / allthethings: /all-the-things.html phantomcss grunt task
Managing what ruby gems you have installed http://bundler.io/ Vagrant Setting up development instances for consistency http://www.vagrantup.com/ Creating your own Grunt tasks http://gruntjs.com/creating-tasks Bower Managing project dependencies http://bower.io/ 360
kitt
mayuki
guaca
jnchito
terryu16
16bitidol
manfredsteyer
har1101
skrb
youkidearitai
nilpe
elenatanasoiu
simas
mraible
marketingsoph
sarafernandez
badams
pedronauck
techseoconnect
tmiket
eileencodes
quramy
stephenakadiri
marcelosomers
![Kitt Hodsden • @kitt • http://ki.tt/sotr 123 grunt.registerTask('gogogo', ['browserSync', 'watch']);](https://files.speakerdeck.com/presentations/8c73c360ce750131a5d15ae3f95c3a1a/slide_122.jpg){kind=link}
![Kitt Hodsden • @kitt • http://ki.tt/sotr 229 dev[405]% grep background-color](https://files.speakerdeck.com/presentations/8c73c360ce750131a5d15ae3f95c3a1a/slide_228.jpg){kind=link}
