Grunt

Transcript

1. Grunt @sebasporto
2. WHAT? Task runner (like make, rake)
3. WHY? Cross platform Lots of plug-ins Nice logging Is JS Is Node
4. WHY NOT? Verbose Could end as an unmaintainable complex tangle mess of configuration
5. Main uses Build system Live reload Daemons Automated tasks Whatever
6. Common plug-ins Lint Minify Concat Test (Mocha, Jasmine) Optimise images
7. Installing grunt Install grunt cli as global Install grunt as local Uses package.json to keep track of dependencies (devDependecies)
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
9. A basic task grunt.registerTask('foo', 'A task', function(arg1, arg2) { … }); $ grunt foo arg1 arg2
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(); });
11. A multitask grunt.registerMultiTask('foo', 'A task', function() { … }); grunt.initConfig({ foo: { dev: {…}, prod: {…} } });
12. Multitasks $ grunt foo grunt.initConfig({ foo: { dev: {…}, prod: {…} } }); runs dev and prod
13. Multitasks $ grunt foo:dev grunt.initConfig({ foo: { dev: {…}, prod: {…} } }); runs dev only
14. Chaining tasks grunt.registerTask(‘all', [‘jshint’, ‘mocha’, ‘concat’]); $ grunt all
15. Chaining tasks grunt.registerTask('all', 'A task', function() { grunt.task.run(‘jshint’, ‘concat’); grunt.task.run(‘ngmin’); }); $ grunt all
16. Async tasks grunt.registerTask('all', 'A task', function() { var done = this.async(); ! doSomethingAsync(done); }); $ grunt all
17. Events grunt.event.on(‘foo:started’, handler); ! grunt.event.emit(‘foo:stated’, args…);
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
19. Creating a plug-in Install grunt-init module Clone template Run generator Code npm publish
20. Plug-in best practices Create an NPM module first Wrap that module in a Grunt plug-in
21. Thanks @sebasporto