Grunt: The JavaScript Task Runner

Slides for my talk at Front-end Developers User Group (Singapore)

Transcript

1. The JavaScript Task Runner
2. What is Grunt? Grunt is like Ant, Make, Rake, SCons, etc. but, Javascript. NPM.
3. build script
4. Automate your build So you can: ... do continuous integration, ... release to production without fear, ... work on more interesting things.
5. Is Grunt for me? frontend backend mixed Backbone, Ember, Angular REST/WebSocket API Express.js
6. Grunt Plugins grunt-contrib: 26 and growing Community: 450+
8. Using Grunt 1. Create package.json 2. Gruntfile.js 3. Run npm install 4. grunt [task[:target]]
9. package.json { "name": "hello-world", "version": "0.1.0", "dependencies": { "grunt": "~0.4.0", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-uglify": "~0.1.1" } }
10. Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ uglify: { build: { src: 'app.js', dest: 'build/app.min.js' } }, jshint: { all: ['**/*.js'] } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint', 'uglify']); };
11. Have it your way Declarative Imperative
12. Demo
13. Poor Man's CI $ sudo -i # crontab -e */5 * * * * cd /var/www/myapp.com && git reset --hard && git pull origin master && npm install && npm test && grunt
14. I am Sebastiaan I email seb@cf.sg I blog ninja.sg I work cf.sg I code git.io/seb