Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Let Grunt do the work, focus on the fun! [Open Web Camp 2013]

  • 7,532 views
Uploaded on

Google’s Dirk Ginader thinks great developers are lazy, and there’s nothing wrong with that. After all, would you rather spend your time working on the mundane stuff — like minification, linting,......

Google’s Dirk Ginader thinks great developers are lazy, and there’s nothing wrong with that. After all, would you rather spend your time working on the mundane stuff — like minification, linting, compilation, unit testing, etc — or actually developing your code?

In this presentation, Dirk will show you how to set up the Grunt JavaScript Task Runner so that you and your team can focus on the fun!

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,532
On Slideshare
7,443
From Embeds
89
Number of Embeds
3

Actions

Shares
Downloads
55
Comments
0
Likes
16

Embeds 89

https://twitter.com 73
http://lanyrd.com 11
http://www.google.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Let Grunt do the work, focus on the fun! Dirk Ginader, Google, 2013 @ginader http://dir.kg/slides
  • 2. Let Grunt do the endlessly repetitive tedious tasks, focus on the important stuff like Accessibility! Dirk Ginader, Google, 2013
  • 3. Let Grunt do the work, focus on the fun! Dirk Ginader, Google, 2013
  • 4. Why Build scripts?
  • 5. Because great Developers are lazy.
  • 6. Because great Developers are lazy. FACT.
  • 7. time spent task sizenon-geek geek does it manually makes fun of geek’s complicated method loses does it manually gets annoyed writes script to automate runs script wins
  • 8. Build systems have been around for ages • Make • Maven • and so many more ... • Ant • Rake
  • 9. They’re all great and powerful and all...
  • 10. 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/
  • 11. How much I liked to configure with XML?
  • 12. I’m a Front End Developer!
  • 13. I like Javascript
  • 14. I like LOVE Javascript
  • 15. Just one year ago Ben Alman did me a great favor:
  • 16. GRUNT The JavaScript Task Runner
  • 17. written in Javascript
  • 18. using the node package manager
  • 19. FAST adoption rate • jQuery • Modernizr • Adobe • twitter • ...
  • 20. because it’s easy!
  • 21. System Setup:
  • 22. download and install node.js from: http://nodejs.org/
  • 23. $ npm install -g grunt-cli
  • 24. Project Setup:
  • 25. 2 important Files: package.json Gruntfile.js
  • 26. package.json
  • 27. { "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
  • 28. 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
  • 29. { "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
  • 30. $ npm install grunt --save-dev
  • 31. { "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
  • 32. $ npm install install all the defined Dependencies in one go
  • 33. Gruntfile.js
  • 34. Minify with Grunt http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 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']); };
  • 35. 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/
  • 36. Minify with Grunt http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 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']); };
  • 37. Minify with Grunt http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 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']); };
  • 38. Minify with Grunt http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 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']); };
  • 39. let’s see what it does! $ grunt
  • 40. easy to add more $ npm i grunt-contrib-jshint --save-dev
  • 41. add JS Linting module.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']); }; https://npmjs.org/package/grunt-contrib-jshint
  • 42. tired of typing already? $ grunt watch
  • 43. watch: { gruntfile: { files: [ 'Gruntfile.js', 'js/myfile.js'], tasks: ['jshint'] } } https://npmjs.org/package/grunt-contrib-watch
  • 44. add data from package.json module.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']); };
  • 45. { "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" } } https://npmjs.org/doc/json.html
  • 46. add data from package.json module.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']); };
  • 47. add data from package.json module.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']); };
  • 48. 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']); https://npmjs.org/package/grunt- contrib-cssmin
  • 49. optimize Images imagemin: { dist: { options: { optimizationLevel: 3 }, files: { // 'destination': 'source' 'dist/img.png': 'src/img.png', 'dist/img.jpg': 'src/img.jpg' } } } grunt.registerTask('default', ['imagemin']); https://npmjs.org/package/grunt- contrib-imagemin
  • 50. but it’s more than just optimizations
  • 51. Build HTML Pages markdown: { all: { files: ['readme.markdown','version-history.markdown'], template: 'web/template.html', dest: 'web', options: { gfm: true, codeLines: { before: '<span>', after: '</span>' } } } } https://npmjs.org/package/ grunt-markdown
  • 52. remove debug code removelogging: { dist: { src: 'js/jquery.tabs.min.js', dest: 'js/jquery.tabs.min.js' } } https://npmjs.org/package/ grunt-remove-logging
  • 53. compile Sass/Compass // setup Compass/Sass to load from existing config.rb compass: { dist: { options: { config: 'config.rb' } } } https://npmjs.org/package/ grunt-contrib-compass
  • 54. ...but Kitt will tell you all about that in the next Session :-)
  • 55. and Livereload! https://npmjs.org/package/ grunt-contrib-livereload
  • 56. all done? deploy!
  • 57. FTP upload dance?
  • 58. https://npmjs.org/ package/grunt-rsync
  • 59. Scaffolding
  • 60. $ npm install -g grunt-init
  • 61. many templates for grunt-init • Gruntfile • Grunt plugin • jQuery plugin • node.js • ...
  • 62. $ git clone git:// github.com/gruntjs/grunt- init-jquery.git ~/.grunt- init/jquery
  • 63. $ grunt-init jquery
  • 64. The opinions I expressed here represent my own and not necessarily those of my employer. btw:We’re hiring! Talk to me :-) Thank you! Questions?
  • 65. 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 • http://dir.kg/slides