Grunt all day!

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

1. Grunt all day! …and some other stuff Douglas Knudsen Universal Mind
3. please remember to fill out the surveys
4. me twitter: douglasknudsen ! G+: douglasknudsen ! email: douglasknudsen@gmail.com ! blog: http://www.cubicleman.com ! https://github.com/douglasknudsen
5. agenda • why oh why • enter Grunt! • but first, some node • and some npm • onto grunt • plugins galore
6. Karma!
7. why we love for loops but not when they involve us directly
8. why along came ant maven xml config make nant
9. why why not use JS?
10. why enter grunt configuration based on JS
11. what grunt is a javascript task runner workflow tool
12. what based on nodejs
13. node JS all up in your server! evented I/O for the V8 JS engine cylonjs, hummingbird, johnny-five, AWS, machine_learning
14. 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');
15. node cross platform http://nodejs.org/ grab your binaries
16. node many libraries exist, crazy community fever nearly 90k packages. 23m dls a day https://www.npmjs.org/
17. node : npm enter npm node package manager comes with node though its not really a acronym
18. node : npm use npm to install libraries npm install lodash
19. node : npm libraries can be installed globally or locally npm install -g yo npm install lodash
20. node : npm node_modules package.json npm install grunt-contrib-copy --save-dev
21. 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
22. npm add node_modules to .gitignore you are using git are you not? npm install
23. grunt npm install -g grunt-cli cd <yourProjectDir> npm install grunt --save-dev
24. grunt the grunt file Gruntfile.js
25. grunt : gruntfile module.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'); };
26. grunt : gruntfile module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); }; wrapper config read
27. grunt : gruntfile cssmin: { production: { expand: true, cwd: 'css', src: ['*.css'], dest: 'css' }, dev: { expand: false, cwd: 'css', src: ['*.css'], dest: 'css' } } task target
28. grunt : gruntfile grunt cssmin:dev
29. grunt : gruntfile http://gruntjs.com/sample-gruntfile npm install -g grunt-init usage: grunt-init jquery
30. grunt run multiple tasks sequentially grunt.registerTask(‘workFlow’, [‘sass:dev’,’karma’,’copy’])
31. grunt : sass grunt.loadNpmTasks('grunt-contrib-compass') https://github.com/gruntjs/grunt-contrib-compass compile sass to css using compass
32. grunt : cssmin compass: { 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'] }
33. grunt : jshint grunt.loadNpmTasks('grunt-contrib-jshint') https://github.com/gruntjs/grunt-contrib-jshint validate your js with jshint
34. 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:{} } }
35. grunt : watch grunt.loadNpmTasks('grunt-contrib-watch') https://github.com/gruntjs/grunt-contrib-watch run tasks when watched file patterns are modified
36. grunt : watch watch:{ options: { livereload:true }, js: { files: ['<%= src.js %>'], tasks: ['js', 'timestamp'] }, css: { files: ['<%= src.sass %>'], tasks: ['css', 'timestamp'] }
37. 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!
38. grunt : tl;dr TWO important files: package.json Gruntfile.js
39. grunt : other yes folks, you can make maven grunt yes folks, you can make nuget grunt
40. grunt : yo scaffolding! opinionated scaffolding!
41. yo npm install -g yo npm install -g generator-webapp yo webapp grunt serve
42. yo : webapp • html5 boilerplate • twiiter bootstrap • sass • structure • build • jasmine • karma • phantomjs • dependencies via bower • …
43. yo : angular npm install -g generator-angular yo angular yo angular:controller myController yo angular:directive myDirective
44. yo many many generators • angular • jhipster • ember • backbone • meanstack • karma • symfony • foundation
45. yo result structure dependencies tools
46. 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/
47. gulp gulp is on the horizon still kind of new http://gulpjs.com/ code-over-configuration
48. 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
49. ciao thanks for dropping in! be sure to fill out the survey