Giving your Development more Grunt - FOWA London 2013

Transcript

1. 1.

   GIVING YOUR DEVELOPMENT MORE GRUNT @jack_franklin #FOWA

2. 2.

   comp-sci student javascript / ruby author & blogger

3. 3.

   THANKS ADDY!

4. 4.

   None
5. 5.

   0.4.1

6. 6.

   PLUGINS

7. 7.

   NODE

8. 8.

   npm

9. 9.

   WINDOWS

10. 10.

    npm install grunt-cli -g installing grunt the package to install

    install it globally (system wide)
11. 11.

    mkdir my-new-project cd my-new-project new project

12. 12.

    { "name": "my-sample-app", "version": "0.0.0", "devDependencies": { "grunt": "0.4.1" }

    } package.json
13. 13.

    install deps npm install

14. 14.

    module.exports = function(grunt) { grunt.initConfig({ // config goes here });

    }; Gruntfile.js
15. 15.

    Gruntfile.js package.json src/ - one.js - two.js - three.js src

    files
16. 16.

    npm install grunt-contrib-uglify --save-dev uglify plugin

17. 17.

    { ... "devDependencies": { "grunt": "0.4.1", "grunt-contrib-uglify": "~0.2.4" } }

    package.json
18. 18.

    module.exports = function(grunt) { grunt.initConfig({ // config goes here });

    grunt.loadNpmTasks(“grunt- contrib-uglify”); }; Gruntfile.js
19. 19.

    module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files:

    { 'dist/out.js': ['src/*.js'] } } } }); ... }; Gruntfile.js
20. 20.

    > grunt uglify Running "uglify:minify" (uglify) task File "dist/out.js" created.

    Done, without errors. Running the task
21. 21.

    grunt.loadNpmTasks(...); grunt.registerTask(“default”, “uglify”); Gruntfile.js > grunt # now runs the

    uglify task
22. 22.

    npm install grunt-contrib-jshint --save-dev JSHint

23. 23.

    grunt.loadNpmTasks(“grunt-contrib- uglify”); grunt.loadNpmTasks(“grunt-contrib- jshint”); Gruntfile.js

24. 24.

    uglify: { /* snip */ }, jshint: { all: ['Gruntfile.js',

    'src/ *.js'] }, // rest of Gruntfile Gruntfile.js
25. 25.

    > grunt jshint Running "jshint:all" (jshint) task >> 4 files

    lint free. Done, without errors. Running the task
26. 26.

    grunt.registerTask(“default”, [“jshint”, “uglify”]); Default Task

27. 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. 28.

    // JSHint won't like the missing // semi colon console.log("file

    2") src/two.js
29. 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. 30.

    Multi Tasks lots of tasks can have different configurations

31. 31.

    module.exports = function(grunt) { grunt.initConfig({ uglify: { minify: { files:

    { 'dist/out.js': ['src/*.js'] } } } }); ... }; Gruntfile.js
32. 32.

    uglify: { minify: { /* snip */ }, withBanner: {

    options: { banner: "/*Hello World*/" }, files: { 'dist/out.js': ['src/*.js'] } } }, // rest of Gruntfile Gruntfile.js
33. 33.

    > grunt uglify:withBanner Running "uglify:withBanner" (uglify) task File "dist/out.js" created.

    Done, without errors. Running a task
34. 34.

    > cat dist/out.js /*Hello World*/console.log("file 1"),console.log("file 3"),console.log("file 2"); Gruntfile.js

35. 35.

    grunt.registerTask("default", ["jshint", "uglify:withBanner"]); Gruntfile.js

36. 36.

    npm install grunt-contrib-watch --save-dev Watching

37. 37.

    grunt.loadNpmTasks('grunt-contrib-watch'); Watching

38. 38.

    uglify: { /*snip*/ }, watch: { files: [‘src/*.js’, ‘Gruntfile.js’], tasks:

    [‘jshint’], }, jshint: { /*snip*/ } Gruntfile.js
39. 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. 40.

    Watching Running JSHint constantly Checking tests haven’t broken Auto compiling

    Sass/Less
41. 41.

    Notifications npm install grunt-notify --save-dev grunt.loadNpmTasks('grunt-contrib-notify');

42. 42.

    None
43. 43.

    Testing npm install grunt-contrib-jasmine --save- dev grunt.loadNpmTasks('grunt-contrib- jasmine');

44. 44.

    Gruntfile.js jshint: { /* snip */ }, jasmine: { test:

    { src: 'src/*.js', options: { specs: 'spec/*.js' } } }, watch: { /*snip */ },
45. 45.

    spec/test.js describe("my app", function() { it("passes", function() { expect(two()).toEqual(2); });

    });
46. 46.

    src/two.js window.two = function() { return 2; };

47. 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. 48.

    Default Task grunt.registerTask("default", [ "jshint", "jasmine", "uglify:withBanner" ]);

49. 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. 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. 51.

    npm install grunt-concurrent --save-dev grunt.loadNpmTasks('grunt-concurrent'); Concurrent

52. 52.

    concurrent: { target1: ['jasmine', 'jshint'] } grunt.registerTask("default", [ "concurrent:target1", "uglify:withBanner"

    ]); Gruntfile.js
53. 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.
54. 54.

    None
55. 55.

    "src/*.js" Tidying Up

56. 56.

    grunt.initConfig({ srcFiles: "src/*.js", uglify: { /*snip */ }, ... });

    Defining Vars
57. 57.

    jshint: { all: [ 'Gruntfile.js', '<%= srcFiles %>' ] },

    Using Vars
58. 58.

    define once refer lots change once

59. 59.

    grunt.initConfig({ srcFiles: "src/*.js", outFile: "dist/out.js", uglify: { /* snip */

    }, ... }); More Vars
60. 60.

    minify: { files: { '<%= outFile %>': ['<%= srcFiles %>']

    } } More Vars
61. 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. 62.

    npm install matchdep --save-dev Match Dep

63. 63.

    // replace all the loadNpmTask() lines with: require('matchdep') .filterDev('grunt-*') .forEach(grunt.loadNpmTasks);

    Match Dep
64. 64.

    “work less, do more, make awesome” -@addyosmani

65. 65.

    be lazy automate lessen friction

66. 66.

    “embrace the ecosystem” -me, Generate Conf, Sept 2013

67. 67.

    love your tools get to know them

68. 68.

    None
69. 69.

    setup once use again and again iterate

70. 70.

    scratched the surface

71. 71.

    popular jQuery BBC Twitter Adobe Bocoup Opera WordPress

72. 72.

    700+ plugins http://gruntjs.com/plugins

73. 73.

    700+ plugins minification image optimisation templating compiling local servers live

    reloading
74. 74.

    for more gruntjs.com @gruntjs @gruntweekly #grunt on freenode

75. 75.

    be warned! watch out for outdated tutorials

76. 76.

    0.4.1

77. 77.

    any (easy) questions? speakerdeck.com/jackfranklin @jack_franklin javascriptplayground.com https://github.com/javascript-playground/fowa-grunt-talk