Let Grunt do the work,
focus on the fun!
Dirk Ginader, Google, 2013
@ginader http://dir.kg/slides
Let Grunt do the endlessly
repetitive tedious tasks, focus
on the important stuff
like Accessibility!
Dirk Ginader, Google...
Let Grunt do the work,
focus on the fun!
Dirk Ginader, Google, 2013
Why Build scripts?
Because great
Developers
are lazy.
Because great
Developers
are lazy.
FACT.
time
spent
task sizenon-geek
geek does it manually
makes fun of geek’s
complicated method
loses
does it
manually
gets
anno...
Build systems have
been around for ages
• Make
• Maven
• and so many more ...
• Ant
• Rake
They’re all great and
powerful and all...
Minify with Ant
<target name="js-compile-all" description="Compile JavaScript files with Closure"
unless="skip-js-compile"...
How much I liked to
configure with XML?
I’m a Front End
Developer!
I like Javascript
I like LOVE Javascript
Just one year ago
Ben Alman did me a
great favor:
GRUNT
The JavaScript Task Runner
written in Javascript
using the node
package manager
FAST adoption rate
• jQuery
• Modernizr
• Adobe
• twitter
• ...
because it’s easy!
System Setup:
download and install
node.js from:
http://nodejs.org/
$ npm install -g grunt-cli
Project Setup:
2 important Files:
package.json
Gruntfile.js
package.json
{
"name": "jQuery-Accessible-Tabs",
"version": "1.9.7",
"homepage": "http://github.com/ginader/Accessible-Tabs",
"author":...
Gives you:
• Variables you can use in your script
i.e. version and name
• Dev Dependencies that allows you to
quickly inst...
{
"name": "jQuery-Accessible-Tabs",
"version": "1.9.7",
"homepage": "http://github.com/ginader/Accessible-Tabs",
"author":...
$ npm install grunt --save-dev
{
"name": "jQuery-Accessible-Tabs",
"version": "1.9.7",
"homepage": "http://github.com/ginader/Accessible-Tabs",
"author":...
$ npm install
install all the defined
Dependencies in one go
Gruntfile.js
Minify with Grunt
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
module.e...
Minify with Ant
<target name="js-compile-all" description="Compile JavaScript files with Closure"
unless="skip-js-compile"...
Minify with Grunt
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
module.e...
Minify with Grunt
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
module.e...
Minify with Grunt
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
module.e...
let’s see what it does!
$ grunt
easy to add more
$ npm i grunt-contrib-jshint --save-dev
add JS Linting
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
all: ['*.js']
},
uglify: {
dist: {
src: 'my...
tired of typing already?
$ grunt watch
watch: {
gruntfile: {
files: [ 'Gruntfile.js', 'js/myfile.js'],
tasks: ['jshint']
}
}
https://npmjs.org/package/grunt-cont...
add data from package.json
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),...
{
"name": "jQuery-Accessible-Tabs",
"version": "1.9.7",
"homepage": "http://github.com/ginader/Accessible-Tabs",
"author":...
add data from package.json
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),...
add data from package.json
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),...
minify and combine CSS
cssmin: {
compress: {
options: {
banner: '<%= banner %>'
},
files: {
'project.min.css': ['1.css','2...
optimize Images
imagemin: {
dist: {
options: {
optimizationLevel: 3
},
files: {
// 'destination': 'source'
'dist/img.png':...
but it’s more than just
optimizations
Build HTML Pages
markdown: {
all: {
files: ['readme.markdown','version-history.markdown'],
template: 'web/template.html',
...
remove debug code
removelogging: {
dist: {
src: 'js/jquery.tabs.min.js',
dest: 'js/jquery.tabs.min.js'
}
}
https://npmjs.o...
compile Sass/Compass
// setup Compass/Sass to load from existing config.rb
compass: {
dist: {
options: {
config: 'config.r...
...but Kitt will tell you all about that
in the next Session :-)
and Livereload!
https://npmjs.org/package/
grunt-contrib-livereload
all done? deploy!
FTP upload dance?
https://npmjs.org/
package/grunt-rsync
Scaffolding
$ npm install -g grunt-init
many templates for
grunt-init
• Gruntfile
• Grunt plugin
• jQuery plugin
• node.js
• ...
$ git clone git://
github.com/gruntjs/grunt-
init-jquery.git ~/.grunt-
init/jquery
$ grunt-init jquery
The opinions I expressed here represent my own
and not necessarily those of my employer.
btw:We’re hiring! Talk to me :-)
...
Resources
• Grunt: http://gruntjs.com/
• Great article: http://dir.kg/grunt.workflow
• Extending Grunt big time: http://yeo...
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Upcoming SlideShare
Loading in …5
×

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

14,339 views

Published 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, 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!

Published in: Technology, Design
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,339
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
80
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

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

  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

×