Grunt - An Introduction

Short introduction to Grunt (What? Why? How?), Common use cases, What is Grunt not, Dependency management with Bower/npm

Transcript

1. An Introduction
2. What is Grunt? • Task Runner • Written in JavaScript • On top of node.js
3. Why use a task runner? • Automation • Faster • Fail proof - or at least it will complain • Collaborative
4. Why use Grunt? • Platform independent • Big ecosystem • All the cool node.js stuff
5. How to use Grunt Command line tool $ grunt Running "uglify:dist" (uglify) task File "dist/main.js" created. Uncompressed size: 389 bytes. Compressed size: 119 bytes gzipped (185 bytes minified). Done, without errors. $ grunt tests $ grunt phpunit:testSuiteOne
6. How to use Grunt Gruntfile.js • Root directory • VCS/Git module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { globals: { jQuery: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['jshint']); };
7. Interlude: npm & bower • Dependency management ◦ npm: for everything [node.js] ◦ bower: for everything web • Integrate well with Grunt
8. Common use cases • CSS/JS pre processing • Minification • Image optimization • Testing / linting • File operations • HTML wiring
9. Common use cases - even better! • CSS + images = spritemaps • (Simple) deployment • Grunt watch • Shell scripts • … and more!
10. What Grunt NOT is • Limited to JavaScript (kind of) • Know your tools • No to non-interactive • Not an application
11. hands-on After the break