• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Let Grunt do the work, focus on the fun!
 

Let Grunt do the work, focus on the fun!

on

  • 3,783 views

Introduction to Grunt, the Javascript Task Runner

Introduction to Grunt, the Javascript Task Runner
HTML5 Developer Conference 2013

Statistics

Views

Total Views
3,783
Views on SlideShare
3,775
Embed Views
8

Actions

Likes
7
Downloads
29
Comments
1

1 Embed 8

https://twitter.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Let Grunt do the work, focus on the fun! Let Grunt do the work, focus on the fun! Presentation Transcript

    • Let Grunt do the work, focus on the fun! Dirk Ginader, Google, 2013 1
    • Let Grunt do the endlesslyrepetitive tedious tasks, focus on the important stuff! Dirk Ginader, Google, 2013 2
    • Let Grunt do the work, focus on the fun! Dirk Ginader, Google, 2013 3
    • Why Build scripts? 4
    • Because great Developers are lazy. 5
    • Because great Developers are lazy. FACT. 6
    • runs scripttime losesspent writes script to automate wins gets annoyed makes fun of geek’s complicated method does it manually geek does it manually non-geek task size 7
    • Build systems have been around for ages• Make • Ant• Maven • Rake• and so many more ... 8
    • They’re all great and powerful and all... 9
    • Minify with Ant<target name="js-compile-all" description="Compile JavaScript files with Closure"unless="skip-js-compile"> <echo>Compiling JS files in ${input.scripts.dir} in closure...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg line="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js" /> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished compiling JS files</echo></target> http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 10
    • 11
    • How much I liked toconfigure with XML? 12
    • 13
    • I’m a Front End Developer! 14
    • I like Javascript 15
    • I like LOVE Javascript 16
    • 17
    • Just one year agoBen Alman did me a great favor: 18
    • GRUNTThe JavaScript Task Runner 19
    • 20
    • written in Javascript 21
    • using the nodepackage manager 22
    • FAST adoption rate• jQuery• Modernizr• Adobe• twitter• ... 23
    • because it’s easy! 24
    • System Setup: 25
    • download and install node.js from: http://nodejs.org/ 26
    • $ npm install -g grunt-cli 27
    • Project Setup: 28
    • 2 important Files: package.json Gruntfile.js 29
    • package.json 30
    • { "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" }, "devDependencies": { }} https://npmjs.org/doc/json.html 31
    • Gives you:• Variables you can use in your script i.e. version and name• Dev Dependencies that allows you to quickly install all required npm modules 32
    • { "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" }, "devDependencies": { }} https://npmjs.org/doc/json.html 33
    • $ npm install grunt --save-dev 34
    • { "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" }, "devDependencies": { "grunt": "~0.4.0" }} https://npmjs.org/doc/json.html 35
    • install all the defined Dependencies in one go$ npm install 36
    • Gruntfile.js 37
    • Minify with Grunt module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: dist/myfile.js, dest: dist/myfile.min.js }, } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.registerTask(default, [uglify]); };http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 38
    • Minify with Ant<target name="js-compile-all" description="Compile JavaScript files with Closure"unless="skip-js-compile"> <echo>Compiling JS files in ${input.scripts.dir} in closure...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg line="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js" /> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished compiling JS files</echo></target> http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 39
    • 40
    • Minify with Grunt module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: dist/myfile.js, dest: dist/myfile.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.registerTask(default, [uglify]); };http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 41
    • Minify with Grunt module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: dist/myfile.js, dest: dist/myfile.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.registerTask(default, [uglify]); };http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 42
    • Minify with Grunt module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: dist/myfile.js, dest: dist/myfile.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.registerTask(default, [uglify]); };http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 43
    • 44
    • easy to add more$ npm i grunt-contrib-jshint --save-dev 45
    • add JS Lintingmodule.exports = function(grunt) { grunt.initConfig({ jshint: { all: [*.js] }, uglify: { dist: { src: myfile.js, dest: myfile.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.loadNpmTasks(grunt-contrib-jshint); grunt.registerTask(default, [jshint,uglify]);}; 46
    • add data from package.jsonmodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(package.json), jshint: { all: [*.js] }, uglify: { options: { banner: /*! <%= pkg.name %> + <%= grunt.template.today("yyyy-mm-dd") %> */n }, dist: { src: myfile.js, dest: myfile.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.loadNpmTasks(grunt-contrib-jshint); grunt.registerTask(default, [jshint,uglify]);}; 47
    • add data from package.jsonmodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(package.json), jshint: { all: [*.js] }, uglify: { options: { banner: /*! <%= pkg.name %> + <%= grunt.template.today("yyyy-mm-dd") %> */n }, dist: { src: <%= pkg.name %>.js, dest: <%= pkg.name %>.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.loadNpmTasks(grunt-contrib-jshint); grunt.registerTask(default, [jshint,uglify]);}; 48
    • add data from package.jsonmodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(package.json), jshint: { all: [*.js] }, uglify: { options: { banner: /*! <%= pkg.name %> + <%= grunt.template.today("yyyy-mm-dd") %> */n }, dist: { src: <%= pkg.name %>.js, dest: <%= pkg.name %>.<%= pkg.version %>.min.js } } }); grunt.loadNpmTasks(grunt-contrib-uglify); grunt.loadNpmTasks(grunt-contrib-jshint); grunt.registerTask(default, [jshint,uglify]);}; 49
    • minify and combine CSS cssmin: { compress: { options: { banner: <%= banner %> }, files: { project.min.css: [1.css,2.css, ...] } } }grunt.loadNpmTasks(grunt-contrib-cssmin);grunt.registerTask(default, [jshint,uglify, cssmin]); 50
    • optimize Imagesimagemin: { dist: { options: { optimizationLevel: 3 }, files: { // destination: source dist/img.png: src/img.png, dist/img.jpg: src/img.jpg } }}grunt.registerTask(default, [imagemin]); 51
    • but it’s more than just optimizations 52
    • render markdown to HTMLmarkdown: { all: { files: [readme.markdown,version-history.markdown], template: web/template.html, dest: web, options: { gfm: true, codeLines: { before: <span>, after: </span> } } }} 53
    • remove debug code removelogging: { dist: { src: js/jquery.tabs.min.js, dest: js/jquery.tabs.min.js } } 54
    • compile Sass/Compass // setup Compass/Sass to load from existing config.rb compass: { dist: { options: { config: config.rb } } } 55
    • and Livereload! 56
    • Scaffolding 57
    • $ npm install -g grunt-init 58
    • many templates for grunt-init• Gruntfile• Grunt plugin• jQuery plugin• node.js• ... 59
    • $ git clone git://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery 60
    • $ grunt-init jquery 61
    • 62
    • Thank you! Questions?The opinions I expressed here represent my own and not necessarily those of my employer. btw: We’re hiring! Talk to me :-) 63
    • Resources• Grunt: http://gruntjs.com/• Great article: http://dir.kg/grunt.workflow• Extending Grunt big time: http://yeoman.io• Me: http://dir.kg/me • @ginader on twitter • the example projects: http://github.com/ginader/ • http://ginader.com 64