grunt all day
DESCRIPTION
Grunt All day! Presented at Atlanta Code Camp 2014 Grunt has fast become the defacto workflow workhorse in the modern web developers tool kit. This session will introduce you to using Grunt in your daily routines as well as surrounding technologies. Drop in for a brief introduction to Node and NPM, the Node Package Manager. Following that we will deep dive into Grunt and other strange noises like Bower, SASS, Lint, or live-reload.TRANSCRIPT
![Page 1: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/1.jpg)
Grunt all day! …and some other stuff
Douglas Knudsen Universal Mind
![Page 2: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/2.jpg)
![Page 3: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/3.jpg)
please remember to fill out the surveys
![Page 4: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/4.jpg)
me
twitter: douglasknudsen !
G+: douglasknudsen !
email: [email protected] !
blog: http://www.cubicleman.com !
https://github.com/douglasknudsen
![Page 5: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/5.jpg)
agenda
• why oh why
• enter Grunt!
• but first, some node
• and some npm
• onto grunt
• plugins galore
![Page 7: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/7.jpg)
why
we love for loops
but not when they involve us directly
![Page 8: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/8.jpg)
why
along came ant
maven
xml config
make
nant
![Page 9: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/9.jpg)
why
why not use JS?
![Page 10: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/10.jpg)
why
enter grunt
configuration based on JS
![Page 11: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/11.jpg)
what
grunt is a javascript task runner
workflow tool
![Page 12: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/12.jpg)
what
based on nodejs
![Page 13: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/13.jpg)
node
JS all up in your server!
evented I/O for the V8 JS engine
cylonjs, hummingbird, johnny-five, AWS, machine_learning
![Page 14: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/14.jpg)
node
var net = require('net'); !
var server = net.createServer(function (socket) { socket.write('Echo server\r\n'); socket.pipe(socket); }); !
server.listen(1337, '127.0.0.1');
![Page 15: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/15.jpg)
node
cross platform
http://nodejs.org/grab your binaries
![Page 16: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/16.jpg)
node
many libraries exist, crazy community fever
nearly 90k packages. 23m dls a day
https://www.npmjs.org/
![Page 17: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/17.jpg)
node : npm
enter npm
node package manager
comes with node
though its not really a acronym
![Page 18: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/18.jpg)
node : npm
use npm to install libraries
npm install lodash
![Page 19: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/19.jpg)
node : npm
libraries can be installed globally
or locally
npm install -g yo
npm install lodash
![Page 20: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/20.jpg)
node : npm
node_modules
package.json
npm install grunt-contrib-copy --save-dev
![Page 21: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/21.jpg)
npm : package.json
{ "name": "david-tucker-site", "version": "0.0.6", "author": "David Tucker", "description": "The Personal Blog of David Tucker at davidtucker.net", "devDependencies": { "browserify-shim": "~2.0.3", "grunt-contrib-jshint": "~0.4.3", "grunt-contrib-sass": "~0.3.0" } }
npm init
![Page 22: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/22.jpg)
npm
add node_modules to .gitignore
you are using git are you not?
npm install
![Page 23: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/23.jpg)
grunt
npm install -g grunt-cli
cd <yourProjectDir>
npm install grunt --save-dev
![Page 24: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/24.jpg)
grunt
the grunt file
Gruntfile.js
![Page 25: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/25.jpg)
grunt : gruntfilemodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } } }); grunt.loadNpmTasks(‘grunt-contrib-concat'); };
![Page 26: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/26.jpg)
grunt : gruntfile
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); };
wrapper
config
read
![Page 27: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/27.jpg)
grunt : gruntfilecssmin: { production: { expand: true, cwd: 'css', src: ['*.css'], dest: 'css' }, dev: { expand: false, cwd: 'css', src: ['*.css'], dest: 'css' } }
task
target
![Page 28: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/28.jpg)
grunt : gruntfile
grunt cssmin:dev
![Page 29: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/29.jpg)
grunt : gruntfile
http://gruntjs.com/sample-gruntfile
npm install -g grunt-init
usage: grunt-init jquery
![Page 30: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/30.jpg)
grunt
run multiple tasks sequentially
grunt.registerTask(‘workFlow’, [‘sass:dev’,’karma’,’copy’])
![Page 31: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/31.jpg)
grunt : sass
grunt.loadNpmTasks('grunt-contrib-compass')
https://github.com/gruntjs/grunt-contrib-compass
compile sass to css using compass
![Page 32: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/32.jpg)
grunt : cssmincompass: { dist: { options: { cssDir: ['<%= distdir %>/css'], sassDir: ['src/styles'], noLineComments: true, importPath: ['bower_components/bootstrap-sass-official'], force: true } }, dev: { options: { cssDir: ['<%= distdir %>/css'], sassDir: ['src/styles'], importPath: ['bower_components/bootstrap-sass-official'] } }
![Page 33: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/33.jpg)
grunt : jshint
grunt.loadNpmTasks('grunt-contrib-jshint')
https://github.com/gruntjs/grunt-contrib-jshint
validate your js with jshint
![Page 34: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/34.jpg)
grunt : jshint jshint:{ files:['gruntFile.js', '<%= src.js %>', '<%= src.jsTpl %>', '<%= src.specs %>', '<%= src.scenarios %>'], options:{ curly:true, eqeqeq:true, immed:true, latedef:true, newcap:true, noarg:true, sub:true, boss:true, eqnull:true, globals:{} } }
![Page 35: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/35.jpg)
grunt : watch
grunt.loadNpmTasks('grunt-contrib-watch')
https://github.com/gruntjs/grunt-contrib-watch
run tasks when watched file patterns are modified
![Page 36: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/36.jpg)
grunt : watchwatch:{ options: { livereload:true }, js: { files: ['<%= src.js %>'], tasks: ['js', 'timestamp'] }, css: { files: ['<%= src.sass %>'], tasks: ['css', 'timestamp'] }
![Page 37: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/37.jpg)
grunt : tl;dr
• install node • npm install -g grunt-cli • cd /../your/project../ • npm init • npm install grunt --save-dev • touch Gruntfile.js • add tasks to Gruntfile.js • grunt!
![Page 38: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/38.jpg)
grunt : tl;dr
TWO important files:
package.json
Gruntfile.js
![Page 39: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/39.jpg)
grunt : other
yes folks, you can make maven grunt
yes folks, you can make nuget grunt
![Page 40: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/40.jpg)
grunt : yo
scaffolding!
opinionated scaffolding!
![Page 41: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/41.jpg)
yo
npm install -g yo
npm install -g generator-webapp
yo webapp
grunt serve
![Page 42: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/42.jpg)
yo : webapp
• html5 boilerplate • twiiter bootstrap • sass • structure • build • jasmine • karma • phantomjs • dependencies via bower • …
![Page 43: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/43.jpg)
yo : angular
npm install -g generator-angular
yo angular
yo angular:controller myController
yo angular:directive myDirective
![Page 44: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/44.jpg)
yo
many many generators
• angular • jhipster • ember • backbone • meanstack • karma • symfony • foundation
![Page 45: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/45.jpg)
yo
result
structure
dependencies
tools
![Page 46: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/46.jpg)
yo
don’t see one you need?
don’t like the way a generator works?
my team has a different way!
role your own!
http://yeoman.io/authoring/
![Page 47: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/47.jpg)
gulp
gulp is on the horizon
still kind of new
http://gulpjs.com/
code-over-configuration
![Page 48: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/48.jpg)
resources• http://davidtucker.net/articles/automating-with-grunt • https://www.npmjs.org/ • http://www.slideshare.net/RahulNanwani/integrating-
grunt-and-bower-with-maven • https://www.npmjs.org/package/grunt-nuget • http://yeoman.io/ • http://gruntjs.com/ • https://github.com/angular-app/angular-app • http://joelhooks.com/ • http://cliffmeyers.com/ • http://livereload.com/ • https://egghead.io/technologies/grunt
![Page 49: Grunt All Day](https://reader036.vdocuments.us/reader036/viewer/2022081404/55878e98d8b42a405d8b4655/html5/thumbnails/49.jpg)
ciao
thanks for dropping in!
be sure to fill out the survey