SlideShare a Scribd company logo
1 of 22
Download to read offline
GRUNT‾!GRUNT¾ Õçß vœØk−‾—Created by /Kobayashi Kazuhiro kzhrk.com
@mizukamik
:Ÿ”̊©Grunt »
Grunt”¾ Õçß
Øk ³q•»
GRUNT »Node.js³³i|¤Ïþ è ¾ ”ò èâß
ÜÕ˳Ł1|–ux ƒ©œ³Šøa x−
ÜÕË”Šøa »
# sass
sass --watch src/sass:src/css
# TypeScript
tsc -w src/ts/script.ts -outDir src/js
# CoffeeScript
coffee -cw src/coffee -o src/config
('A`)„̈¤̊̃¡
ô¹¾ ”V¾a¶∙”ŠøaØ °©−”
v¢0ØË ¾¼ çØà èžßÒßØ
Happy
GRUNT”¾ Õçß
NODE.JS”¾ Õçß
MAC”þ 
pkg³ÝÁ ßè|–Ýõ Ë áË
http://nodejs.org/
WINDOWS”þ 
1. node.exe ³ÝÁ ßè| ²”ôÄ Ý•Àø
2. %ÈNcNODE_HOME •1. node.exe ³ÝÁ
ßè|¤ôÄ Ý³Ł1
3. %ÈNcPATH •%NODE_HOME% ³ g
http://nodejs.org/download/
¾ Õçß ”Î
$ node -v
Ł1ô¹¾package.json
Gruntfile.coffee(Gruntfile.js)
PACKAGE.JSON
npm init
PACKAGE.JSON
Ð™Ñ¾ç” ³̨Ö
{
"name": "grunt-sample",
"version": "0.0.1",
"private": true,
"dependencies": {
"grunt" : "git://github.com/gruntjs/grunt.git#master",
"grunt-contrib-watch" : "~0.5.3",
"grunt-contrib-connect" : "~0.5.0",
"gurnt-contrib-copy" : "~0.4.1"
}
}
Plugins
PACKAGE.JSON
package.json”dependencies•l¡|¤ðáÍßÔw
node_modulesÝÁ ßè©—¡
npm link
GRUNTFILE.JS (GRUNTFILE.COFFEE)
# Gruntfile.coffee
module.exports = (grunt) ->
grunt.initConfig
connect:
server:
options:
port: 9001
base: 'src'
watch:
options:
livereload: true
html:
files: 'src/index.html'
grunt-contrib-watch
grunt-contrib-connect
grunt-contrib-clean
grunt-contrib-copy
grunt-contrib-concat
grunt-contrib-cssmin
grunt-contrib-uglify
grunt-contrib-csslint
grunt-contrib-jshint
grunt-contrib-sass
grunt-contrib-less
grunt-contrib-stylus
grunt-contrib-imagemin
øz³qGRUNTPLUGINS
³i¡−Ïþ 蔾 Õçß
# sass
gem install sass
# compass
gem install compass
Øk ”−‾
öÀô
JavaScript»concat|¤Ø”³̨Ö
éô
JavaScript»concat|–minify|¤Ø”³̨Ö
’∼÷mßw q’‘o—|¤

More Related Content

What's hot (9)

Computer fundamental full
Computer fundamental fullComputer fundamental full
Computer fundamental full
 
MASC 335: Project 2
MASC 335: Project 2MASC 335: Project 2
MASC 335: Project 2
 
勉強会へ行こう!
勉強会へ行こう!勉強会へ行こう!
勉強会へ行こう!
 
Jesus é o mesmo hebreus
Jesus é o mesmo hebreusJesus é o mesmo hebreus
Jesus é o mesmo hebreus
 
Opra W6 Free And Low Cost Tools You Can Use
Opra W6 Free And Low Cost Tools You Can UseOpra W6 Free And Low Cost Tools You Can Use
Opra W6 Free And Low Cost Tools You Can Use
 
Visual basic
Visual basicVisual basic
Visual basic
 
Five Minutes Introduction For Rails
Five Minutes Introduction For RailsFive Minutes Introduction For Rails
Five Minutes Introduction For Rails
 
Operating Systems::: G.C.E O/L
Operating Systems::: G.C.E O/LOperating Systems::: G.C.E O/L
Operating Systems::: G.C.E O/L
 
Mastering utility
Mastering utilityMastering utility
Mastering utility
 

Viewers also liked

Partes de un computador
Partes de un computadorPartes de un computador
Partes de un computadord1c2e3
 
Magodeozeneecuador
MagodeozeneecuadorMagodeozeneecuador
Magodeozeneecuadorito666max
 
Présentation Emgoldex pour Goldexteam (français)
 Présentation Emgoldex pour Goldexteam (français) Présentation Emgoldex pour Goldexteam (français)
Présentation Emgoldex pour Goldexteam (français)Goldexteam
 
Salem witch trials mt,aw,dw
Salem witch trials mt,aw,dwSalem witch trials mt,aw,dw
Salem witch trials mt,aw,dwMichaela2015
 
Le goût des mots carnet de voyage juillet 2013
Le goût des mots   carnet de voyage juillet 2013Le goût des mots   carnet de voyage juillet 2013
Le goût des mots carnet de voyage juillet 2013labelle-ecole
 
Mga Akda Mula sa Burma
Mga Akda Mula sa BurmaMga Akda Mula sa Burma
Mga Akda Mula sa Burmajohnlovesantos
 
Sp ventilacion total
Sp ventilacion totalSp ventilacion total
Sp ventilacion totalKasmy Fabela
 
Results-Only Web Investments
Results-Only Web InvestmentsResults-Only Web Investments
Results-Only Web InvestmentsJakob Persson
 

Viewers also liked (9)

Partes de un computador
Partes de un computadorPartes de un computador
Partes de un computador
 
Magodeozeneecuador
MagodeozeneecuadorMagodeozeneecuador
Magodeozeneecuador
 
Présentation Emgoldex pour Goldexteam (français)
 Présentation Emgoldex pour Goldexteam (français) Présentation Emgoldex pour Goldexteam (français)
Présentation Emgoldex pour Goldexteam (français)
 
Salem witch trials mt,aw,dw
Salem witch trials mt,aw,dwSalem witch trials mt,aw,dw
Salem witch trials mt,aw,dw
 
Le goût des mots carnet de voyage juillet 2013
Le goût des mots   carnet de voyage juillet 2013Le goût des mots   carnet de voyage juillet 2013
Le goût des mots carnet de voyage juillet 2013
 
Discoid eczema
Discoid eczemaDiscoid eczema
Discoid eczema
 
Mga Akda Mula sa Burma
Mga Akda Mula sa BurmaMga Akda Mula sa Burma
Mga Akda Mula sa Burma
 
Sp ventilacion total
Sp ventilacion totalSp ventilacion total
Sp ventilacion total
 
Results-Only Web Investments
Results-Only Web InvestmentsResults-Only Web Investments
Results-Only Web Investments
 

Similar to Grunt入門

yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909Yusuke Wada
 
Windows 7兼容性系列课程(3):有针对的兼容性开发(上)
Windows 7兼容性系列课程(3):有针对的兼容性开发(上)Windows 7兼容性系列课程(3):有针对的兼容性开发(上)
Windows 7兼容性系列课程(3):有针对的兼容性开发(上)Chui-Wen Chiu
 
SLES11で構築するXen仮想化+HAクラスタ入門
SLES11で構築するXen仮想化+HAクラスタ入門SLES11で構築するXen仮想化+HAクラスタ入門
SLES11で構築するXen仮想化+HAクラスタ入門VirtualTech Japan Inc.
 
Rails Deployment with NginX
Rails Deployment with NginXRails Deployment with NginX
Rails Deployment with NginXStoyan Zhekov
 
P2P Bug Tracking with SD
P2P Bug Tracking with SDP2P Bug Tracking with SD
P2P Bug Tracking with SDJesse Vincent
 
095722121-期中報告-UGC
095722121-期中報告-UGC095722121-期中報告-UGC
095722121-期中報告-UGCcherish0906
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
 
080620 Identity Conference #2 hiroki
080620 Identity Conference #2 hiroki080620 Identity Conference #2 hiroki
080620 Identity Conference #2 hirokiHiroki Itoh
 

Similar to Grunt入門 (14)

20081123-web2.0class
20081123-web2.0class20081123-web2.0class
20081123-web2.0class
 
What Can Compilers Do for Us?
What Can Compilers Do for Us?What Can Compilers Do for Us?
What Can Compilers Do for Us?
 
yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909
 
Windows 7兼容性系列课程(3):有针对的兼容性开发(上)
Windows 7兼容性系列课程(3):有针对的兼容性开发(上)Windows 7兼容性系列课程(3):有针对的兼容性开发(上)
Windows 7兼容性系列课程(3):有针对的兼容性开发(上)
 
CLT #11 Naruhiko Ogasawara
CLT #11 Naruhiko OgasawaraCLT #11 Naruhiko Ogasawara
CLT #11 Naruhiko Ogasawara
 
SLES11で構築するXen仮想化+HAクラスタ入門
SLES11で構築するXen仮想化+HAクラスタ入門SLES11で構築するXen仮想化+HAクラスタ入門
SLES11で構築するXen仮想化+HAクラスタ入門
 
Rails Deployment with NginX
Rails Deployment with NginXRails Deployment with NginX
Rails Deployment with NginX
 
P2P Bug Tracking with SD
P2P Bug Tracking with SDP2P Bug Tracking with SD
P2P Bug Tracking with SD
 
095722121-期中報告-UGC
095722121-期中報告-UGC095722121-期中報告-UGC
095722121-期中報告-UGC
 
Genome Browser
Genome BrowserGenome Browser
Genome Browser
 
Why CouchDB
Why CouchDBWhy CouchDB
Why CouchDB
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
 
HTML-Bangla E-book
HTML-Bangla E-bookHTML-Bangla E-book
HTML-Bangla E-book
 
080620 Identity Conference #2 hiroki
080620 Identity Conference #2 hiroki080620 Identity Conference #2 hiroki
080620 Identity Conference #2 hiroki
 

Recently uploaded

2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)Delhi Call girls
 
KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...
KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...
KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...Cara Menggugurkan Kandungan 087776558899
 
the Husband rolesBrown Aesthetic Cute Group Project Presentation
the Husband rolesBrown Aesthetic Cute Group Project Presentationthe Husband rolesBrown Aesthetic Cute Group Project Presentation
the Husband rolesBrown Aesthetic Cute Group Project Presentationbrynpueblos04
 
WOMEN EMPOWERMENT women empowerment.pptx
WOMEN EMPOWERMENT women empowerment.pptxWOMEN EMPOWERMENT women empowerment.pptx
WOMEN EMPOWERMENT women empowerment.pptxpadhand000
 
Pokemon Go... Unraveling the Conspiracy Theory
Pokemon Go... Unraveling the Conspiracy TheoryPokemon Go... Unraveling the Conspiracy Theory
Pokemon Go... Unraveling the Conspiracy Theorydrae5
 
LC_YouSaidYes_NewBelieverBookletDone.pdf
LC_YouSaidYes_NewBelieverBookletDone.pdfLC_YouSaidYes_NewBelieverBookletDone.pdf
LC_YouSaidYes_NewBelieverBookletDone.pdfpastor83
 
2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)Delhi Call girls
 
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka
call Now 9811711561 Cash Payment乂 Call Girls in Dwarkacall Now 9811711561 Cash Payment乂 Call Girls in Dwarka
call Now 9811711561 Cash Payment乂 Call Girls in Dwarkavikas rana
 
2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)Delhi Call girls
 
Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...
Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...
Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...mitaliverma221
 
2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)Delhi Call girls
 
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka Mor
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka Morcall Now 9811711561 Cash Payment乂 Call Girls in Dwarka Mor
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka Morvikas rana
 

Recently uploaded (14)

2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Mukherjee Nagar (Delhi)
 
KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...
KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...
KLINIK BATA Jual obat penggugur kandungan 087776558899 ABORSI JANIN KEHAMILAN...
 
the Husband rolesBrown Aesthetic Cute Group Project Presentation
the Husband rolesBrown Aesthetic Cute Group Project Presentationthe Husband rolesBrown Aesthetic Cute Group Project Presentation
the Husband rolesBrown Aesthetic Cute Group Project Presentation
 
WOMEN EMPOWERMENT women empowerment.pptx
WOMEN EMPOWERMENT women empowerment.pptxWOMEN EMPOWERMENT women empowerment.pptx
WOMEN EMPOWERMENT women empowerment.pptx
 
Pokemon Go... Unraveling the Conspiracy Theory
Pokemon Go... Unraveling the Conspiracy TheoryPokemon Go... Unraveling the Conspiracy Theory
Pokemon Go... Unraveling the Conspiracy Theory
 
LC_YouSaidYes_NewBelieverBookletDone.pdf
LC_YouSaidYes_NewBelieverBookletDone.pdfLC_YouSaidYes_NewBelieverBookletDone.pdf
LC_YouSaidYes_NewBelieverBookletDone.pdf
 
2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Palam (Delhi)
 
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka
call Now 9811711561 Cash Payment乂 Call Girls in Dwarkacall Now 9811711561 Cash Payment乂 Call Girls in Dwarka
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka
 
(Aarini) Russian Call Girls Surat Call Now 8250077686 Surat Escorts 24x7
(Aarini) Russian Call Girls Surat Call Now 8250077686 Surat Escorts 24x7(Aarini) Russian Call Girls Surat Call Now 8250077686 Surat Escorts 24x7
(Aarini) Russian Call Girls Surat Call Now 8250077686 Surat Escorts 24x7
 
2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Dashrath Puri (Delhi)
 
(Anamika) VIP Call Girls Navi Mumbai Call Now 8250077686 Navi Mumbai Escorts ...
(Anamika) VIP Call Girls Navi Mumbai Call Now 8250077686 Navi Mumbai Escorts ...(Anamika) VIP Call Girls Navi Mumbai Call Now 8250077686 Navi Mumbai Escorts ...
(Anamika) VIP Call Girls Navi Mumbai Call Now 8250077686 Navi Mumbai Escorts ...
 
Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...
Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...
Call Girls In Mumbai Just Genuine Call ☎ 7738596112✅ Call Girl Andheri East G...
 
2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)
2k Shots ≽ 9205541914 ≼ Call Girls In Jasola (Delhi)
 
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka Mor
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka Morcall Now 9811711561 Cash Payment乂 Call Girls in Dwarka Mor
call Now 9811711561 Cash Payment乂 Call Girls in Dwarka Mor
 

Grunt入門