Grunt

Transcript

1. Grunt
   @sebasporto
   

   View Slide

2. WHAT?
   Task runner (like make, rake)
   

   View Slide

3. WHY?
   Cross platform
   Lots of plug-ins
   Nice logging
   Is JS
   Is Node
   

   View Slide

4. WHY NOT?
   Verbose
   Could end as an unmaintainable
   complex tangle mess of
   configuration
   

   View Slide

5. Main uses
   Build system
   Live reload
   Daemons
   Automated tasks
   Whatever
   

   View Slide

6. Common plug-ins
   Lint
   Minify
   Concat
   Test (Mocha, Jasmine)
   Optimise images
   

   View Slide

7. Installing grunt
   Install grunt cli as global
   Install grunt as local
   Uses package.json to keep track of
   dependencies (devDependecies)
   

   View Slide

8. Gruntfile
   module.exports = function(grunt) {
   !
   grunt.initConfig({
   uglify: {
   build: {
   src: 'src/<%= pkg.name %>.js',
   dest: 'build/<%= pkg.name %>.min.js'
   }
   }
   });
   !
   grunt.loadNpmTasks('grunt-contrib-uglify');
   !
   grunt.registerTask('default', ['uglify']);
   };
   tasks config
   loading and
   registering tasks
   

   View Slide

9. A basic task
   grunt.registerTask('foo', 'A task', function(arg1, arg2) {
   …
   });
   $ grunt foo arg1 arg2
   

   View Slide

10. Just Node
    var foo = require(‘foo’);
    !
    grunt.registerTask('foo', 'A task', function(arg1, arg2) {
    // You can do whatever you can with Node
    !
    foo.doSomething();
    });
    

    View Slide

11. A multitask
    grunt.registerMultiTask('foo', 'A task', function() {
    …
    });
    grunt.initConfig({
    foo: {
    dev: {…},
    prod: {…}
    }
    });
    

    View Slide

12. Multitasks
    $ grunt foo
    grunt.initConfig({
    foo: {
    dev: {…},
    prod: {…}
    }
    });
    runs dev and prod
    

    View Slide

13. Multitasks
    $ grunt foo:dev
    grunt.initConfig({
    foo: {
    dev: {…},
    prod: {…}
    }
    });
    runs dev only
    

    View Slide

14. Chaining tasks
    grunt.registerTask(‘all', [‘jshint’, ‘mocha’, ‘concat’]);
    $ grunt all
    

    View Slide

15. Chaining tasks
    grunt.registerTask('all', 'A task', function() {
    grunt.task.run(‘jshint’, ‘concat’);
    grunt.task.run(‘ngmin’);
    });
    $ grunt all
    

    View Slide

16. Async tasks
    grunt.registerTask('all', 'A task', function() {
    var done = this.async();
    !
    doSomethingAsync(done);
    });
    $ grunt all
    

    View Slide

17. Events
    grunt.event.on(‘foo:started’, handler);
    !
    grunt.event.emit(‘foo:stated’, args…);
    

    View Slide

18. Installing a plug-in
    $ npm install grunt-goserver --save-dev
    grunt.loadNpmTasks(‘grunt-goserver');
    !
    grunt.initConfig({
    goserver: {
    default: {
    srcPath: '/full/path/to/src/folder',
    …
    },
    },
    })
    In Gruntfile.js
    

    View Slide

19. Creating a plug-in
    Install grunt-init module
    Clone template
    Run generator
    Code
    npm publish
    

    View Slide

20. Plug-in best practices
    Create an NPM module first
    Wrap that module in a Grunt plug-in
    

    View Slide

21. Thanks
    @sebasporto
    

    View Slide