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
2.9k
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
860
Building a Pixel Art Editor with Elm
shuhei
1
760
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
160
Draw Animated Chart on React Native
shuhei
0
8.7k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
840
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Introduction to Angular 2
shuhei
2
150
Other Decks in Programming
See All in Programming
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
240
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Rails アプリ地図考 Flush Cut
makicamel
1
130
color-scheme: light dark; を完全に理解する
uhyo
7
490
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
Better Code Design in PHP
afilina
0
170
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
Jasprが凄い話
hyshu
0
160
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
950
PEPCは何を変えようとしていたのか
ken7253
2
220
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
190
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Unsuck your backbone
ammeep
669
57k
Statistics for Hackers
jakevdp
797
220k
The Invisible Side of Design
smashingmag
299
50k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Designing for Performance
lara
604
68k
KATA
mclloyd
29
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing for humans not robots
tammielis
250
25k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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זוחאְגכծ״ֻ濼זְկ