Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Let Grunt do the work, focus on the fun!
Dirk Ginader
April 03, 2013
Technology
5
9.8k
Let Grunt do the work, focus on the fun!
Introduction to Grunt, the Javascript Task Runner
HTML5 Developer Conference 2013
Dirk Ginader
April 03, 2013
Tweet
Share
More Decks by Dirk Ginader
See All by Dirk Ginader
Let Grunt do the work, focus on the fun! Open Web Camp 2013
ginader
0
59
Sass, Compass and the new tools - Open Web Camp IV
ginader
3
130
Javascript done right - Open Web Camp III
ginader
3
140
Other Decks in Technology
See All in Technology
20220731 如何跟隨開源技術保持你的職涯發展
pichuang
0
120
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
syoshie
1
1.4k
DevelopersIO 2022 俺のTerraform Pipeline
takakuni
0
440
Backlog × RPAでいろいろ捗った話
z_tetsu
0
390
Azure DevOps Online Vol.6 - 業務で必要なCIをみんなで考えよう
kkamegawa
0
280
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
line_developers
PRO
4
820
Step-by-Step MLOps and Microsoft Products
shisyu_gaku
1
580
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
5
2.7k
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
430
Learning to Solve Hard Minimal Problems
takmin
1
480
EC/CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
masaru_b_cl
0
430
ロボットの実行すらメンドクサイ!?
kou12092
0
210
Featured
See All Featured
A designer walks into a library…
pauljervisheath
196
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Happy Clients
brianwarren
89
5.6k
Robots, Beer and Maslow
schacon
152
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Producing Creativity
orderedlist
PRO
334
37k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Atom: Resistance is Futile
akmur
255
20k
Support Driven Design
roundedbygravity
87
8.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
GraphQLとの向き合い方2022年版
quramy
16
8.5k
Transcript
Let Grunt do the work, focus on the fun! Dirk
Ginader, Google, 2013 1
Let Grunt do the endlessly repetitive 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
time spent task size non-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 7
Build systems have been around for ages • Make •
Maven • and so many more ... • Ant • Rake 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 to configure with XML? 12
13
I’m a Front End Developer! 14
I like Javascript 15
I like LOVE Javascript 16
17
Just one year ago Ben Alman did me a great
favor: 18
GRUNT The JavaScript Task Runner 19
20
written in Javascript 21
using the node package 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
$ npm install install all the defined Dependencies in one
go 36
Gruntfile.js 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 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 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
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
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
44
easy to add more $ npm i grunt-contrib-jshint --save-dev 45
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']); }; 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: '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.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']); }; 48
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']); }; 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 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']); 51
but it’s more than just optimizations 52
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
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
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
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