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
96
株式会社 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
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
1.8k
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
130
AIを使ってテストを楽にする
kworkdev
PRO
0
250
CLIPでマルチモーダル画像検索 →とても良い
wm3
0
530
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
120
DSPy入門
tomehirata
3
480
アノテーション作業書作成のGood Practice
cierpa0905
PRO
0
240
様々なファイルシステム
sat
PRO
0
260
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
260
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
910
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
150
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
360
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Into the Great Unknown - MozCon
thekraken
40
2.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Unsuck your backbone
ammeep
671
58k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Documentation Writing (for coders)
carmenintech
75
5.1k
Bash Introduction
62gerente
615
210k
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 ΛࣗΈʹΧελϚ Πζ͠·͠ΐ͏ɻ ࠇ͍ը໘(ίϯιʔϧ)͕ා͍ͳΒΤϯδχΞʹڠྗ
ͯ͠Β͍·͠ΐ͏ɻ ҰਓͰΔͳΒɺ͡Ίਂ͘ߟ͑ͣʹͱΓ͋͑ ࣮ͣߦͯ͠Έ·͠ΐ͏ɻ
ຊ͕Μ͍͖ͬͯ·͠ΐ͏ʂ