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
790
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
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
構文解析器入門
ydah
7
2k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
3
390
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Why Our Code Smells
bkeepers
PRO
337
57k
Building an army of robots
kneath
306
45k
Designing for Performance
lara
610
69k
A better future with KSS
kneath
238
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How STYLIGHT went responsive
nonsquared
100
5.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Faster Mobile Websites
deanohume
308
31k
Six Lessons from altMBA
skipperchong
28
3.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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זוחאְגכծ״ֻ濼זְկ