Let Grunt do the work, focus on the fun!
-
Upload
dirk-ginader -
Category
Technology
-
view
114 -
download
0
description
Transcript of Let Grunt do the work, focus on the fun!
![Page 1: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/1.jpg)
Let Grunt do the work, focus on the fun!
Dirk Ginader, Google, 2013
1
![Page 2: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/2.jpg)
Let Grunt do the endlessly repetitive tedious tasks, focus
on the important stuff!Dirk Ginader, Google, 2013
2
![Page 3: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/3.jpg)
Let Grunt do the work, focus on the fun!
Dirk Ginader, Google, 2013
3
![Page 4: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/4.jpg)
Why Build scripts?
4
![Page 5: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/5.jpg)
Because great Developers
are lazy.
5
![Page 6: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/6.jpg)
Because great Developers
are lazy. FACT.
6
![Page 7: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/7.jpg)
timespent
task sizenon-geekgeek does it manually
makes fun of geek’scomplicated method
loses
does it manually
gets annoyed
writes scriptto automate
runs script
wins
7
![Page 8: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/8.jpg)
Build systems have been around for ages
• Make
• Maven
• and so many more ...
• Ant
• Rake
8
![Page 9: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/9.jpg)
They’re all great and powerful and all...
9
![Page 10: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/10.jpg)
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
![Page 11: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/11.jpg)
11
![Page 12: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/12.jpg)
How much I liked to configure with XML?
12
![Page 13: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/13.jpg)
13
![Page 14: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/14.jpg)
I’m a Front End Developer!
14
![Page 15: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/15.jpg)
I like Javascript
15
![Page 16: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/16.jpg)
I like LOVE Javascript
16
![Page 17: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/17.jpg)
17
![Page 18: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/18.jpg)
Just one year ago Ben Alman did me a
great favor:
18
![Page 19: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/19.jpg)
GRUNTThe JavaScript Task Runner
19
![Page 20: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/20.jpg)
20
![Page 21: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/21.jpg)
written in Javascript
21
![Page 22: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/22.jpg)
using the node package manager
22
![Page 23: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/23.jpg)
FAST adoption rate• jQuery
• Modernizr
• Adobe
• ...
23
![Page 24: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/24.jpg)
because it’s easy!
24
![Page 25: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/25.jpg)
System Setup:
25
![Page 27: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/27.jpg)
$ npm install -g grunt-cli
27
![Page 28: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/28.jpg)
Project Setup:
28
![Page 29: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/29.jpg)
2 important Files:package.jsonGruntfile.js
29
![Page 30: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/30.jpg)
package.json
30
![Page 31: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/31.jpg)
{ "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
![Page 32: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/32.jpg)
Gives you:
• Variables you can use in your scripti.e. version and name
• Dev Dependencies that allows you to quickly install all required npm modules
32
![Page 33: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/33.jpg)
{ "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
![Page 34: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/34.jpg)
$ npm install grunt --save-dev
34
![Page 35: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/35.jpg)
{ "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
![Page 36: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/36.jpg)
$ npm install
install all the defined Dependencies in one go
36
![Page 37: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/37.jpg)
Gruntfile.js
37
![Page 38: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/38.jpg)
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
![Page 39: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/39.jpg)
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
![Page 40: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/40.jpg)
40
![Page 41: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/41.jpg)
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']);};
41
![Page 42: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/42.jpg)
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']);};
42
![Page 43: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/43.jpg)
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']);};
43
![Page 44: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/44.jpg)
44
![Page 45: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/45.jpg)
easy to add more$ npm i grunt-contrib-jshint --save-dev
45
![Page 46: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/46.jpg)
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
![Page 47: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/47.jpg)
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
![Page 48: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/48.jpg)
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
![Page 49: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/49.jpg)
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
![Page 50: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/50.jpg)
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
![Page 51: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/51.jpg)
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
![Page 52: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/52.jpg)
but it’s more than just optimizations
52
![Page 53: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/53.jpg)
render markdown to HTML
markdown: { all: { files: ['readme.markdown','version-history.markdown'], template: 'web/template.html', dest: 'web', options: { gfm: true, codeLines: { before: '<span>', after: '</span>' } } } }
53
![Page 54: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/54.jpg)
remove debug code
removelogging: { dist: { src: 'js/jquery.tabs.min.js', dest: 'js/jquery.tabs.min.js' } }
54
![Page 55: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/55.jpg)
compile Sass/Compass // setup Compass/Sass to load from existing config.rb compass: { dist: { options: { config: 'config.rb' } } }
55
![Page 56: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/56.jpg)
and Livereload!
56
![Page 57: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/57.jpg)
Scaffolding
57
![Page 58: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/58.jpg)
$ npm install -g grunt-init
58
![Page 59: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/59.jpg)
many templates for grunt-init
• Gruntfile
• Grunt plugin
• jQuery plugin
• node.js
• ...
59
![Page 60: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/60.jpg)
$ git clone git://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
60
![Page 61: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/61.jpg)
$ grunt-init jquery
61
![Page 62: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/62.jpg)
62
![Page 63: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/63.jpg)
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?
63
![Page 64: Let Grunt do the work, focus on the fun!](https://reader031.fdocuments.net/reader031/viewer/2022020207/54c739154a795927458b4575/html5/thumbnails/64.jpg)
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