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
Introduction to Grunt
Search
Shuhei Kagawa
July 31, 2014
Programming
0
3k
Introduction to Grunt
勤務先のデザイナー向けに Grunt の紹介をした時の資料です。設定のオブジェクトのことをいろいろ書いてるけど、それどころじゃない雰囲気だったので全部スルーしてしまった・・・。
Shuhei Kagawa
July 31, 2014
Tweet
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
Profiling Node.js apps on production
shuhei
0
900
Building a Pixel Art Editor with Elm
shuhei
1
800
Redux Middleware Wars (Japanese)
shuhei
8
1.9k
Redux Middleware Wars (English)
shuhei
0
180
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
880
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Other Decks in Programming
See All in Programming
AWS発のAIエディタKiroを使ってみた
iriikeita
1
160
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
700
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
470
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
速いWebフレームワークを作る
yusukebe
5
1.7k
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
250
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
tool ディレクティブを導入してみた感想
sgash708
1
160
AIコーディングAgentとの向き合い方
eycjur
0
250
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Unsuck your backbone
ammeep
671
58k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Embracing the Ebb and Flow
colly
87
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Statistics for Hackers
jakevdp
799
220k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Introduction to Grunt Shuhei Kagawa
I was surprised to find that 80-90% of the time
spent by users waiting for pages to load is spent on the frontend, all the work that needs to be done after the HTML document has arrived. ! —Steve Souders (2007). High Performance Web Sites
+4 $44ך 穠さ٥剑㼭⻉ 歗⫷ 47(ך ؟؎ؤ幾 4BTT $PFF4DSJQUך ؝ٝػ؎ٕ
+4 $44 )5.- ךثؑحؙ 涪欽؟٦غ٦ ך饯⹛ +BWB4DSJQUך 荈⹛ذأز أة؎ٕؖ؎س ך⡲䧭 זוזו ؿٗٝزؒٝسדװְֿהכ 㟓ִ♧倯٥٥٥
$ python -m SimpleHTTPServer $ uglify foo.js bar.js -o out.js
$ cssmin foo.css > foo.min.css $ imagemin foo.png > foo.min.png $ svgmin foo.svg > foo.min.svg $ jshint foo.js $ jscs foo.js $ csslint foo.css $ compass …
$ grunt
+BWB4DSJQUד剅ַةأؙٓٝش٦կ ! 鞢㺡זفؚٓ؎ٝ ⦐⟃♳ָ䲿⣘ׅة أؙ㹋遤ׅخ٦ٕկ ! ؿٗٝزؒٝس涪ךرؿ؋ؙزأةٝت٦سկ (PPHMF 5XJUUFS "EPCF
K2VFSZ .P[JMMBזודⵃ欽կ
Gruntfile.js grunt-contrib-less grunt-contrib- requirejs grunt-contrib-sass ぐ珏خ٦ٕ ぐ珏فؚٓ؎ٝ 鏣㹀ؿ؋؎ٕ (SVOU
Ⱅ䒭فؚٓ؎ٝgrunt-contrib-* ؿ؋؎ٕ乼⡲ DMFBO DPQZ DPODBU TZNMJOL ؝٦سثؑحؙ
KTIJOU DTTMJOU 涪佄䴂 XBUDI DPOOFDU MJWFSFMPBE 㖇簭 VHMJGZ DTTNJO JNBHFNJO IUNMNJO SFRVJSFKT DPNQSFTT "MU999 MFTT DPFF DPNQBTT TBTT TUZMVT ذٝفٖ٦ز KBEF IBOEMFCBST KTU +4⽃⡤ذأز RVOJU OPEFVOJU KBTNJOF سًُؗٝز欰䧭 ZVJEPD
ְְהֿ ˖ ةأؙ荈⹛⻉דֹկ ˖ ةأؙך僇俑⻉ח״ث٦يד涪׃װׅ ֻזկ ˖ ♧אךخ٦ٕד圫ղזةأؙ㹋遤דֹ կ ˖
فؚٓ؎ٝةأָؙ鞢㺡կ ˖ ِ٦ؠ٦٥䞔㜠ָ㢳ְկ ˖ 8JOEPXTדⵃ欽׃װְׅկ
⢪ְ倯
欽䠐ׅך ! ⴱ㔐ֽ /PEF OQN HSVOUDMJ ! فٗآؙؑز׀ה QBDLBHFKTPO (SVOUMFKT
˖ +BWB4DSJQUך㹋遤橆㞮կـٓؐؠך㢩ד+BWB4DSJQU⹛ ַֿׅהָדֹկ ˖ (SVOU⹛ַׅךח䗳銲կ ˖ (SVOU劤⡤װぐ珏(SVOUفؚٓ؎ٝ/PEFKTךفؚٗٓ يկ
˖ /PEFךٌآُ٦ٕ盖椚ءأذيկ ˖ /PEFד⢪ֲفؚٗٓيך鿇ㅷٌآُ٦ٕ؎ٝأز٦ ֿٕׅהָדֹկ ˖ (SVOU劤⡤ぐ珏(SVOUفؚٓ؎ٝOQNٌآُ٦ٕה׃ ג盖椚ׁגְկ ˖ (SVOUفؚٓ؎ָٝⵃ欽ׅخ٦ٕ荈⡤OQNךٌآُ٦
ٕדֿ֮הָ㢳ְկKTIJOUװDTTMJOUזוկ ˖ ֿך㜥さכծخ٦ٕ荈⡤(SVOUفؚٓ؎ٝה♧筰ח؎ ٝأز٦ٕדֹկ ˖ $PNQBTTכ3VCZ醡זךדծOQNٌآُ٦ٕדכזְկ
Installation on Windows ˖ ✲ח؎ٝأز٦ٕ ˖ /PEFY ˖ ِ٦ؠ橆㞮㢌侧ך1"5)ח %USERPROFILE%\AppData\Roaming\npm鷄
⸇ֿׅה ˖ 3VCZY $PNQBTT⢪ֲ㜥さ ˖ ؎ٝأز٦ٕ儗ח1"5)鷄⸇ׅؔفءّٝ ثؑحֿؙׅה
Installation on Mac • $ brew update • $ brew
install node ˖ ⡭酔ָ֮לOWNֶָׅׅ $ curl https://raw.githubusercontent.com/creationix/nvm/ v0.12.2/install.sh | bash $ nvm install v0.10.29 $ nvm alias default 0.10.29 • $ brew install ruby ˖ ⡭酔ָ֮לSCFOWֶָׅׅ $ brew install rbenv ruby-build $ rbenv install 2.1.2 $ rbenv global 2.1.2 $ rbenv rehash
grunt ίϚϯυͷΠϯετʔϧ $ npm install -g grunt-cli ! ⟃♴ך״ֲחזל䧭⸆կ !
$ grunt grunt-cli: The grunt command line interface. (v0.1.13) ! Fatal error: Unable to find local grunt.
package.json ˖ OQNٌآُ٦ٕך㹀纏ؿ؋؎ٕկ ˖ فٗآؙؑز嫣ח⡲䧭ׅկ荈ⴓךفٗ آؙؑزOQNٌآُ٦ٕהְֲ罋ִ倯կ ˖ ךفٗآؙؑزח䗳銲זOQNػح؛٦آ 鎸鶢׃גֶֻ(SVOU劤⡤ծ(SVOUךぐ珏 فؚٓ؎ٝזוկׅהծוֿדOQN
⢪ג䗳銲זػح؛٦آ؎ٝأز٦ٕד ֹկ
package.json ͷ࡞ ת׆QBDLBHFKTPO⡲䧭կ $ npm init ! ٌآُ٦ٕ؎ٝأز٦ٕ׃אאծQBDLBHFKTPOך EFW%FQFOEFODJFTח鎸ꐮׅկ荈ⴓד剅ֻ״嚂կ $
npm install -save-dev grunt $ npm install -D grunt-contrib-connect ! فٗآؙؑزח鷿⚥ַ⸇ׅזוծQBDLBHFKTPOָׅדח דֹגְ㜥さכծ剅ַגְٌآُ٦ٕ؎ٝأز٦ٕկ $ npm install
(SVOUMFKT ˖ (SVOUך鏣㹀ؿ؋؎ٕկ ˖ +BWB4DSJQUד鎸鶢ׅ$PFF4DSJQUד〳կ ˖ فٗآؙؑز嫣ח⡲䧭կךفٗآؙؑزד䗳銲ז ةأؙהך鏣㹀鎸鶢ׅկ ˖ ָֿ剅ֽלծ֮הכ㹋遤ֽׅ
˖ ؟ٝفٕIUUQHSVOUKTDPNTBNQMFHSVOUMF
module.exports = function(grunt) { // Task, Target ͷઃఆ grunt.initConfig({ //
Config Object }); ! // ϓϥάΠϯͷಡΈࠐΈʢϓϥάΠϯʹ Task ͕ೖ͍ͬͯΔʣ grunt.loadNpmTasks(‘plugin1’); grunt.loadNpmTasks(‘plugin2’); ! // ಠࣗλεΫͷొʢϓϥάΠϯʹೖ͍ͬͯΔλεΫΛΈ߹Θͤ Δʣ grunt.registerTask(‘sometask’, [‘task1:target1’, task2:target2’]); grunt.registerTask(‘default’, [‘sometask’]); };
珏겲ך5BTL "MJBT5BTL 醱侧ך5BTL♧אחתהךח⢪ֲկ HSVOUSFHJTUFS5BTL ˎCVJMEˏ <ˎDPODBUˏ ˎVHMJGZˏ ˎDTTNJOˏ> HSVOUCVJMECVJME5BTL㹋遤
! .VMUJ5BTL 醱侧ך5BSHFU䭯אկ 㣐⼱ךفؚٓ؎ָٝ欽䠐ׅ5BTLכֿկ HSVOUGPPCBSGPP5BTLךCBS5BSHFU㹋遤 HSVOUGPPGPP5BTLךⰋ5BSHFU㹋遤 ! #BTJD5BTL #BTJDזךחծ֮ת⢪זְկ 荈ⴓד⟣䠐ךةأؙ鷄⸇ׅꥷח⢪ֲה葺ְַկ
Config Multi Task Target options options files Target options files
Multi Task Target options options files Target options files Target ڞ௨ Target ݻ༗
grunt.initConfig({ concat: { options: { separator: ';' }, js: {
src: ['src/**/*.js'], dest: ‘dist/grunt-helloworld.js’ } } }); Task Target
ؿ؋؎ٕػأ 5BSHFUחכⳢ椚׃ְؿ؋؎ٕךؿ؋؎ٕػأ䭷㹀կ TSD EFTU MFT MUFS瘝ծ剅ֹ倯כְְ֮կ ת׆כTSD EFTUך剅ֹ倯ַָװְׅךדֶׅׅկ ؿ؋؎ٕ⳿⸂׃זְ5BTLחכEFTUכ䗳銲זְկ KTIJOUזוկ
! PQUJPOT ؿ؋؎ٕػأך➭ծPQUJPOTחך5BTL㔿剣ךؔفءّ ٝ䭷㹀կ 5BSHFUח䭷㹀ׅהծך5BSHFUֽկ 5BTLח䭷㹀ׅהծ5BSHFUⰟ鸐ד黝欽ׁկ ⚕倯דずׄ갪湡ָ䭷㹀ׁגְ5BSHFUך倯ָ⮚⯓կ
grunt.initConfig({ concat: { options: { separator: ';' }, js: {
src: ['src/**/*.js'], dest: ‘dist/grunt-helloworld.js’ } } }); Options Files
$ grunt connect:server:keepalive task target flag
$ grunt task:target:flag1:flag2
فؚٓ؎ٝ稱➜
grunt-contrib-jshint +BWB4DSJQUثؑحؙ׃ג㉏겗ָ֮ל陨デ邌爙կ 鏣㹀כKTIJOUSDהְֲؿ؋؎ٕח鎸鶢׃גֶֻהծؒر؍ةד KTIJOUⵃ欽ׅꥷח⢪ִג葺ְկٓ؎ـٓٔזוثؑحؙ׃ז ְؿ؋؎ٕכKTIJOUJHOPSFח剅ְגֶֻկ ! jshint: { all: {
src: [’Gruntfile.js’, ‘src/js/**/*’], options: { jshintrc: true } } }
grunt-contrib-uglify +BWB4DSJQU穠さ٥㖇簭٥ꨇ铣⻉կ ! uglify: { all: { src: [‘src/js/foo.js’, ‘src/js/bar.js’],
dest: ‘public/js/bundle.js’ } }
grunt-contrib-imagemin 歗⫷㖇簭կ(*' +1&( 1/( 47(ח㼎䘔կ PQUJPOTכؿ؋؎ٕך珏겲׀החⴽזךדծؿ؋؎ٕך珏겲ד5BSHFUⴓֽ䗳銲 כזְկ TSDחؿ؋؎ٕػة٦ٝהֲתֻ⹛ַזַךדծMFTד鎸鶢׃גְתׅկ ! imagemin:
{ all: { files: { expand: true, cwd: ‘src/img/‘, src: [‘*.{jpg,svg,png,gif}’], dest: ‘dist/img/’, } } }
grunt-contrib-compass DPNQBTTד4BTTؽٕسկ DPOHSC䭷㹀ֽׅד0,կDPOHSCח䭷㹀ׅ ״ֲזⰻ㺁(SVOUMFKTⰻד䭷㹀ׅ倯岀֮կ ! compass: { all: { options:
{ config: ‘config.rb’ } }
grunt-contrib-watch ؿ؋؎ٕ湊鋔׃ծ㢌刿ָ֮ל5BTL㹋遤ׅկ 鏣㹀ָ暴婊דMFT UBTLTהPQUJPOTկMFTח㢌刿ָ֮ לծUBTLT㹋遤ׅկ➭ך5BTLה♧筰ח㹋遤ׅꥷכ ♧殢剑䖓חֿׅהկ ! watch: { js:
{ files: [‘src/js/**/*.js’], tasks: [‘jshint’, ‘uglify’] } }
grunt-contrib-connect 涪欽ך؟٦غ饯⹛ׅկ (SVOUך㹋遤ָ穄ה؟٦غ穄✪ׅךד岣䠐կ穄זְ״ ֲחׅחכHSVOUDPOOFDUTFSWFSLFFQBMJWFהׅկXBUDIה♧ 筰ח⢪ִלLFFQBMJWFכ♶銲կ ! connect: { server: {
options: { port: 8000, base: ‘dist’ } } }
grunt-spritesmith 歗⫷ַ$444QSJUF欽$44欰䧭կ鏣㹀ָ暴婊דPQUJPOT ⢪זְկ$PNQBTTה嫰ץג歗⫷ך⚛ץ倯厫鮾ח寸 ׃ְկ ! spritesmith: { all: { src:
‘src/img/sprites/*.png’, destImg: ‘dist/img/spritesheet.png’, destCSS: ‘dist/css/sprites.css’, algorithm: ‘alt-diagonal’ } }
鑫稢כծぐفؚٓ؎ٝךسًُؗٝز撑 ! 鏣㹀חכفؚٓ؎ٝ׀הח䊴殯ָ֮ךדծسًُؗ ٝزח⛦גְ⢽罋חׅךָ搀ꨇկ
穄
23BJMTזוך؟٦غ؟؎سؿٖ٦يٙ٦ؙדずֿׄ הָדֹךדכ ! "׃ַח"TTFUT1JQFMJOFד֮鿇ⴓ$PFF4DSJQU 4BTT .JOJGZזוחאְגכծ知⽃חדֹկ׃ַ׃ծ ⟃♳ךֿהװֲהׅה㣐㢌կ (SVOUכفؚٓ؎ִׁ֮ٝל⡦דדֹկ תծ؟٦غ٦؟؎سךؿٖ٦يٙ٦ؙꟼ⤘זֻ⢪ִ
ךָ剑㣐ךًٔحزկ
2HVMQזו겲⡂خ٦ٕהך麩ְכ ! "(SVOUכةأؙ嫣ח穠卓ؿ؋؎ٕח剅ֹ鴥ךד 鹼ְկ鏣㹀ؿ؋؎ٕꞿֻזָկ ׃ַ׃ծ⯓涪זךדفؚٓ؎ٝװ䞔㜠ָ⯍㹋׃גְ կת(SVOUכ/PEFשֻזְךדծ/PEF䢪׃ גְזְ➂ח⢪ְװְַׅ ! HVMQכծ4USFBNזו/PEFך濼陎ָ䲿חזגְ ָծ鏣㹀ؿ؋؎ٕꬊ䌢חءٝفٕח剅ֽ׃ծⳢ椚
鸞ְկفؚٓ؎ٝזח⯍㹋կ♧䏝鋅גגծ 孡חⰅ倯⢪ֲה葺ְַկ ! #SPDDPMJזוחאְגכծ״ֻ濼זְկ