Digging Into The Grunt Work Of Development

Ever take a moment to look at your development process and realize there's a lot of rote, repetitive tasks you have to perform in order to shape your code up to run? Things like pre-processing files, minification, bundling, tagging releases in source control, deploying the application, etc. Sure you can do it manually, but do you remember all the steps every single time? How about if there's multiple developers on the team who don't always do those tasks? That's where a tool like Grunt comes in useful as it can automate a lot of things from the NodeJS environment and it lives with your source code so the entire team benefits. If you can perform the task from the command line or with some server-side Javascript, you very likely can automate the process. This presentation assumes at least a familiarity with Javascript & NodeJS, and will get you up and running with Grunt.

Transcript

1. The Grunt Work Of Development Steven Evans
2. The Development Cycle So Far •Install prerequisites ...convert caffeine to working code... •Precompile •Minify/Compress/Uglify •Test •Deploy
3. http://www.newslettercartoons.com/catalog/gifs/5051eb-w.gif
4. How could we improve it •Consistency •Utility •Community •Power & Flexibility
6. Installing Step 1 Step 2 npm install -g grunt-cli Step 3 npm install grunt --save-dev Step 4 edit Gruntfile.js
7. Installing Step 5
8. Installing (Alternative) http://yeoman.io
9. Installing (Alternative) npm install -g grunt-init grunt-init
10. NPM Package.json { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" } }
11. Gruntfile.js (or Gruntfile.coffee) module.exports = function(grunt) { // Do grunt-related things here };
12. An “actual” Gruntfile module.exports = function(grunt) { grunt.registerTask(‘default’, ‘A good description’, function() { // Actually do grunt-related things here grunt.log.write(‘Daisy, daisy, give me your answer do’); }); };
13. Plug-Ins http://gruntjs.org/plugins • Grunt-contrib-watch • Grunt-contrib-jshint • Grunt-contrib-uglify • Grunt-contrib-clean • Grunt-contrib-concat • Grunt-contrib-copy • Grunt-contrib-less • Grunt-contrib-htmlmin • Grunt-contrib-requires • Grunt-contrib-jasmine • Grunt-bower-install • … a LOT more...
14. Load Plugin Tasks module.exports = function(grunt) { // Load it... grunt.loadNpmTasks(‘grunt-contrib-watch’); // Execute as part of default grunt.registerTask(‘default’, [‘uglify’]); };
15. Configuration module.exports = function(grunt) { grunt.initConfig({ ‘taskName’: { … }, ‘taskName2’: { … } }); // Grunt work here };
16. Chaining Tasks grunt.registerTask(‘package’, [‘jshint’, ‘jasmine’, ‘concat’, ‘uglify’]); grunt.registerTask(‘package’, ‘Package up the app...’, [...]);
17. HELP! grunt –h gruntjs.com/frequently-asked-questions IRC - #grunt on irc.freenode.net Grunt Forums (aka http://StackOverflow.com)
18. Caveats of Grunt •File-based IO •Config-heavy •Synchronous by default... •Version 0.4.5 (as of May 12, 2014) •So 2012...
19. Where To Go From Here • Create custom Tasks • Multi Tasks • Gulp (http://gulpjs.com) • Brunch (http://brunch.io)
20. Resources • Slide deck: ◦ https://speakerdeck.com/kopelli/GruntWork • Source: ◦ https://github.com/kopelli/node-js-getting-started