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
910
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.9k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
890
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
160
Other Decks in Programming
See All in Programming
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
CSC509 Lecture 05
javiergs
PRO
0
300
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
180
明日から始めるリファクタリング
ryounasso
0
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
160
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
Serena MCPのすすめ
wadakatu
4
990
ALL CODE BASE ARE BELONG TO STUDY
uzulla
18
3.5k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Docker and Python
trallard
46
3.6k
How to Ace a Technical Interview
jacobian
280
24k
Embracing the Ebb and Flow
colly
88
4.8k
Site-Speed That Sticks
csswizardry
11
900
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Unsuck your backbone
ammeep
671
58k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
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זוחאְגכծ״ֻ濼זְկ