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
株式会社 Loco Partners の社内開発 LT 2014年11月18
Search
Kenya Yamaguchi
November 18, 2014
Technology
2
93
株式会社 Loco Partners の社内開発 LT 2014年11月18
2014年11月18日開催
株式会社 Loco Partners の社内開発 LT で Grunt の超入門について発表
Kenya Yamaguchi
November 18, 2014
Tweet
Share
More Decks by Kenya Yamaguchi
See All by Kenya Yamaguchi
はじめよう CakePHP3
ken880guchi
0
400
DevOps勉強会 LT_2014_11_26
ken880guchi
0
120
Hubot×ChatOps勉強会
ken880guchi
1
1.4k
Other Decks in Technology
See All in Technology
本が全く読めなかった過去の自分へ
genshun9
0
700
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
How Community Opened Global Doors
hiroramos4
PRO
1
130
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
100
asken AI勉強会(Android)
tadashi_sato
0
140
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.1k
2025-06-26 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
230
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
Witchcraft for Memory
pocke
1
660
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
300
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Writing Fast Ruby
sferik
628
62k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Speed Design
sergeychernyshev
32
1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Transcript
GRUNT നଳ
None
࠷ۙͷ WEB ΞϓϦ
࠷ۙͷ WEB ΞϓϦ։ൃ AltJS (CoffeeScript, TypeScript) ͷίϯύΠϧ ֦ு CSS (Sass,
Less, Stylus) ͷίϯύΠϧ JS, CSS ͷ݁߹ͱѹॖ JS, CSS ͷߏจνΣοΫ
(खಈͰ)ͬͯΒΕΔ͔ʁ
͜Μͳͷ͋Γ·͢ɻ
GRUNT ʁ
Node.jsΛ༻ͨ͠ ࣗಈϏϧυπʔϧ
ʁʁʁ
࠷ۙͷ WEB ΞϓϦ։ൃ AltJS (CoffeeScript, TypeScript) ͷίϯύΠϧ ֦ு CSS (Sass,
Less, Stylus) ͷίϯύΠϧ JS, CSS ͷ݁߹ͱѹॖ JS, CSS ͷߏจνΣοΫ ཁ͢Δʹɺ͜ΕΒΛશ෦ GRUNT ͕ࣗಈͰͬͯ͘ΕΔʂ
ͰɺࢲͦΜͳͷ֮͑ͯΔ ࣌ؒͳ͍͠ɻɻɻ ͦΜͳͷΘͳͯ͘ؾ߹͍Ͱख࡞ ۀͰΔ͠ɻɻɻ
None
GRUNT ͜Μͳʹ؆୯ʹ࢝ΊΕΔʂ (ಥʹ࢝·Δ४උखॱ) ࠇ͍ը໘(ίϯιʔϧ)Λ։͍ͯɺ্͔Βॱʹίϐʔ & షΓ ͚ ͔Βͷ Enter!!! cd
~ && mkdir sandbox && mkdir -p sandbox/assets/css && mkdir sandbox/css touch sandbox/assets/css/part1.css && echo "body { background-color: #F2F2F0; }" > sandbox/assets/css/part1.css touch sandbox/assets/css/part2.css && echo "h1 { font-size: 100%; }" > sandbox/assets/css/part2.css
GRUNT ͜Μͳʹ؆୯ʹ࢝ΊΕΔʂ (ಥʹ࢝·Δ४උखॱ) ࠇ͍ը໘(ίϯιʔϧ)Λ։͍ͯɺ্͔Βॱʹίϐʔ & షΓ ͚ ͔Βͷ Enter!!! cd
~ && mkdir sandbox && mkdir -p sandbox/assets/css && mkdir sandbox/css touch sandbox/assets/css/part1.css && echo "body { background-color: #F2F2F0; }" > sandbox/assets/css/part1.css touch sandbox/assets/css/part1.css && echo "h1 { font-size: 100%; }" > sandbox/assets/css/part2.css
GRUNT ͜Μͳʹ؆୯ʹ࢝ΊΕΔ (ಥʹ࢝·ΔΠϯετʔϧखॱ) cd ~/sandbox ruby -e "$(curl -fsSL https://raw.githubusercontent.com/
Homebrew/install/master/install)" brew npm install npm install -g grunt-cli npm install grunt-contrib จࣈ͕Ұഋग़ͯ͘Δ͚ͲɺΠϯ ετʔϥʔͰιϑτΛΠϯετʔϧ ͍ͯ͠ΔΑ͏ͳͷͰ͢ɻ
GRUNT ͜Μͳʹ؆୯ʹ࢝ΊΕΔ (ಥʹ࢝·ΔΠϯετʔϧखॱ) cd ~/sandbox ruby -e "$(curl -fsSL https://raw.githubusercontent.com/
Homebrew/install/master/install)" brew npm install npm install -g grunt-cli npm install grunt-contrib จࣈ͕Ұഋग़ͯ͘Δ͚ͲɺΠϯ ετʔϥʔͰιϑτΛΠϯετʔϧ ͍ͯ͠ΔΑ͏ͳͷͰ͢ɻ
GRUNT ͜Μͳʹ؆୯ʹ࢝ΊΕΔ (࠷ޙͷΠϯετʔϧखॱ) cd ~/sandbox npm init ରܗࣜͰ৭ʑϝοηʔδ͕ग़ͯ͘Δ ͷͰɺͻͨ͢ΒEnterΛ࿈ଧʂʂ
͏ɺΠϯετʔϧऴΘΓɻ
Ͱʁ
ͳʹ͢Μͷʁ
ɹCSS ͷ݁߹Λ GRUNT ʹ खͬͯΒ͍·͠ΐ͏
GRUNT ઃఆखॱ (CSS ͷ݁߹) cd ~/sandbox vi Gruntfile.js module.exports =
function(grunt) { grunt.initConfig({ cssmin: { compress: { files: { 'css/kansei.css': [ 'assets/css/part1.css', 'assets/css/part2.css' ] } } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); }; ϑΝΠϧͷதʹ ͍ͭ͜Λॻ͖ࠐΜͰอଘ ! ͖ͳΤσΟλͰ ࡞ͯ͠େৎʂ
GRUNT ࣮ߦʂ ! > grunt cssmin
GRUNT ࣮ߦʂ ! > grunt cssmin Running "cssmin:compress" (cssmin) task
File css/kansei.css created: 60 B → 48 B ! Done, without errors. ͳΜ͔Ͱͨʂʂ
͏ɺCSS ݁߹࡞ۀऴΘͬͯ·͢ɻ
GRUNT ͕ੜͨ͠ϑΝΠϧΛ֬ೝ cd ~/sandbox cat css/kansei.css
GRUNT ·ͱΊ ͜ͷଞʹ Grunt ʹศརͳػೳɺ֦ு͕ࢁ͋Γ ·͢ɻ৭ʑௐͯ Gruntfile.js ΛࣗΈʹΧελϚ Πζ͠·͠ΐ͏ɻ ࠇ͍ը໘(ίϯιʔϧ)͕ා͍ͳΒΤϯδχΞʹڠྗ
ͯ͠Β͍·͠ΐ͏ɻ ҰਓͰΔͳΒɺ͡Ίਂ͘ߟ͑ͣʹͱΓ͋͑ ࣮ͣߦͯ͠Έ·͠ΐ͏ɻ
ຊ͕Μ͍͖ͬͯ·͠ΐ͏ʂ