Giving your Development more Grunt - FOWA London 2013

An in-depth introduction to GruntJS and some of the best plugins available.

Transcript

1. GIVING YOUR DEVELOPMENT MORE GRUNT @jack_franklin #FOWA
2. comp-sci student javascript / ruby author & blogger
3. THANKS ADDY!
5. 0.4.1
6. PLUGINS
7. NODE
8. npm
9. WINDOWS
10. npm install grunt-cli -g installing grunt the package to install install it globally (system wide)
11. mkdir my-new-project cd my-new-project new project
12. { "name": "my-sample-app", "version": "0.0.0", "devDependencies": { "grunt": "0.4.1" } } package.json
13. install deps npm install
14. module.exports = function(grunt) { grunt.initConfig({ // config goes here }); }; Gruntfile.js
15. Gruntfile.js package.json src/ - one.js - two.js - three.js src files
16. npm install grunt-contrib-uglify --save-dev uglify plugin
17. { ... "devDependencies": { "grunt": "0.4.1", "grunt-contrib-uglify": "~0.2.4" } } package.json
18. module.exports = function(grunt) { grunt.initConfig({ // config goes here }); grunt.loadNpmTasks(“grunt- contrib-uglify”); }; Gruntfile.js
19. module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files: { 'dist/out.js': ['src/*.js'] } } } }); ... }; Gruntfile.js
20. > grunt uglify Running "uglify:minify" (uglify) task File "dist/out.js" created. Done, without errors. Running the task
21. grunt.loadNpmTasks(...); grunt.registerTask(“default”, “uglify”); Gruntfile.js > grunt # now runs the uglify task
22. npm install grunt-contrib-jshint --save-dev JSHint
23. grunt.loadNpmTasks(“grunt-contrib- uglify”); grunt.loadNpmTasks(“grunt-contrib- jshint”); Gruntfile.js
24. uglify: { /* snip */ }, jshint: { all: ['Gruntfile.js', 'src/ *.js'] }, // rest of Gruntfile Gruntfile.js
25. > grunt jshint Running "jshint:all" (jshint) task >> 4 files lint free. Done, without errors. Running the task
26. grunt.registerTask(“default”, [“jshint”, “uglify”]); Default Task
27. > grunt Running "jshint:all" (jshint) task >> 4 files lint free. Running "uglify:minify" (uglify) task File "dist/out.js" created. Done, without errors. Running grunt
28. // JSHint won't like the missing // semi colon console.log("file 2") src/two.js
29. Running "jshint:all" (jshint) task Linting src/two.js ...ERROR [L2:C22] W033: Missing semicolon. console.log("file 2") Warning: Task "jshint:all" failed. Use --force to continue. Aborted due to warnings. Running grunt
30. Multi Tasks lots of tasks can have different configurations
31. module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files: { 'dist/out.js': ['src/*.js'] } } } }); ... }; Gruntfile.js
32. uglify: { minify: { /* snip */ }, withBanner: { options: { banner: "/*Hello World*/" }, files: { 'dist/out.js': ['src/*.js'] } } }, // rest of Gruntfile Gruntfile.js
33. > grunt uglify:withBanner Running "uglify:withBanner" (uglify) task File "dist/out.js" created. Done, without errors. Running a task
34. > cat dist/out.js /*Hello World*/console.log("file 1"),console.log("file 3"),console.log("file 2"); Gruntfile.js
35. grunt.registerTask("default", ["jshint", "uglify:withBanner"]); Gruntfile.js
36. npm install grunt-contrib-watch --save-dev Watching
37. grunt.loadNpmTasks('grunt-contrib-watch'); Watching
38. uglify: { /*snip*/ }, watch: { files: [‘src/*.js’, ‘Gruntfile.js’], tasks: [‘jshint’], }, jshint: { /*snip*/ } Gruntfile.js
39. > grunt watch Running "watch" task Waiting...OK >> File "src/two.js" changed. Running "jshint:all" (jshint) task >> 4 files lint free. Done, without errors. Completed in 0.470s at Wed Oct 23 2013 14:27:08 GMT+0100 (BST) - Waiting... Watching
40. Watching Running JSHint constantly Checking tests haven’t broken Auto compiling Sass/Less
41. Notifications npm install grunt-notify --save-dev grunt.loadNpmTasks('grunt-contrib-notify');
43. Testing npm install grunt-contrib-jasmine --save- dev grunt.loadNpmTasks('grunt-contrib- jasmine');
44. Gruntfile.js jshint: { /* snip */ }, jasmine: { test: { src: 'src/*.js', options: { specs: 'spec/*.js' } } }, watch: { /*snip */ },
45. spec/test.js describe("my app", function() { it("passes", function() { expect(two()).toEqual(2); }); });
46. src/two.js window.two = function() { return 2; };
47. Testing > grunt jasmine Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom . 1 spec in 0.001s. >> 0 failures Done, without errors.
48. Default Task grunt.registerTask("default", [ "jshint", "jasmine", "uglify:withBanner" ]);
49. Default Task Running "jshint:all" (jshint) task >> 4 files lint free. Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom . 1 spec in 0.002s. >> 0 failures Running "uglify:withBanner" (uglify) task File "dist/out.js" created. Done, without errors.
50. Errors Running "jshint:all" (jshint) task >> 4 files lint free. Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom x my app:: passes: failed Expected 2 to equal 3. (1) 1 spec in 0.002s. >> 1 failures
51. npm install grunt-concurrent --save-dev grunt.loadNpmTasks('grunt-concurrent'); Concurrent
52. concurrent: { target1: ['jasmine', 'jshint'] } grunt.registerTask("default", [ "concurrent:target1", "uglify:withBanner" ]); Gruntfile.js
53. Running "concurrent:target1" (concurrent) task Running "jshint:all" (jshint) task >> 4 files lint free. Done, without errors. Running "jasmine:test" (jasmine) task Testing jasmine specs via phantom 1 spec in 0.001s. >> 0 failures Done, without errors. Running "uglify:withBanner" (uglify) task File "dist/out.js" created. Done, without errors.
55. "src/*.js" Tidying Up
56. grunt.initConfig({ srcFiles: "src/*.js", uglify: { /*snip */ }, ... }); Defining Vars
57. jshint: { all: [ 'Gruntfile.js', '<%= srcFiles %>' ] }, Using Vars
58. define once refer lots change once
59. grunt.initConfig({ srcFiles: "src/*.js", outFile: "dist/out.js", uglify: { /* snip */ }, ... }); More Vars
60. minify: { files: { '<%= outFile %>': ['<%= srcFiles %>'] } } More Vars
61. grunt.loadNpmTasks("grunt-contrib- uglify"); grunt.loadNpmTasks("grunt-contrib- jshint"); grunt.loadNpmTasks("grunt-contrib- watch"); grunt.loadNpmTasks("grunt-contrib- jasmine"); grunt.loadNpmTasks("grunt- notify"); Match Dep
62. npm install matchdep --save-dev Match Dep
63. // replace all the loadNpmTask() lines with: require('matchdep') .filterDev('grunt-*') .forEach(grunt.loadNpmTasks); Match Dep
64. “work less, do more, make awesome” -@addyosmani
65. be lazy automate lessen friction
66. “embrace the ecosystem” -me, Generate Conf, Sept 2013
67. love your tools get to know them
69. setup once use again and again iterate
70. scratched the surface
71. popular jQuery BBC Twitter Adobe Bocoup Opera WordPress
72. 700+ plugins http://gruntjs.com/plugins
73. 700+ plugins minification image optimisation templating compiling local servers live reloading
74. for more gruntjs.com @gruntjs @gruntweekly #grunt on freenode
75. be warned! watch out for outdated tutorials
76. 0.4.1
77. any (easy) questions? speakerdeck.com/jackfranklin @jack_franklin javascriptplayground.com https://github.com/javascript-playground/fowa-grunt-talk