Giving your Development more Grunt - FOWA London 2013

Giving your Development more Grunt - FOWA London 2013

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

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

October 25, 2013
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.
  4. 7.
  5. 8.

    npm

  6. 9.
  7. 18.

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

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

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

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

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

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

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

    lint free. Done, without errors. Running the task
  11. 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
  12. 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
  13. 31.

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

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

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

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

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

    [‘jshint’], }, jshint: { /*snip*/ } Gruntfile.js
  16. 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
  17. 42.
  18. 44.

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

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

    Testing > grunt jasmine Running "jasmine:test" (jasmine) task Testing jasmine

    specs via phantom . 1 spec in 0.001s. >> 0 failures Done, without errors.
  20. 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.
  21. 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
  22. 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.
  23. 54.
  24. 68.
  25. 76.