Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let Grunt do the work, focus on the fun!
Search
Dirk Ginader
April 03, 2013
Technology
5
9.9k
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
84
Sass, Compass and the new tools - Open Web Camp IV
ginader
3
200
Javascript done right - Open Web Camp III
ginader
3
160
Other Decks in Technology
See All in Technology
多野優介
tanoyusuke
1
480
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
170
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
150
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
160
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
3.9k
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
110
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
160
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
920
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.1k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
640
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Embracing the Ebb and Flow
colly
88
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Designing for Performance
lara
610
69k
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf 2023
tenderlove
30
1.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Writing Fast Ruby
sferik
629
62k
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