際際滷

安掘京サイト?フロントエンドの互堀晒と
grunt.jsについて

@tomof

1
13定2埖8晩署袗晩

徭失府初
? Twi)er
?ID
?:
?@tomof?

? 床�銈�Solarisに階�い蝶芙に輩めています。

? jQueryの晩云�Zリファレンスサイトを
�\�咾靴討い泙后�
h)p://js.studio-?�\kingdom.com/jquery

2

バ�`ジョンの離いに廣吭
? この�Y創は0.3狼を圷に恬撹されています。
? 0.3狼から0.4狼では、grunt.js
?が
?GrunDile.js
?に
�筝釮気譴襪覆匹累`いがあります。
? 0.3と0.4の�しい�`いは和�を歌孚(哂猟)
h)ps://github.com/gruntjs/grunt/wiki/
Upgrading-?�\from-?�\0.3-?�\to-?�\0.4

3

フロントエンドの互堀晒
? WEBサイトの互堀晒は
バックエンドだけの�n�}じゃない�
? HTTPのリクエストを�pらそう�

歌深�h&p://www.inter-?�\o?ce.co.jp/contents/177/

4

遺皆皆スプライト
? 方定念ぐらいから、HTML,CSSコ�`ディングに
おいては、��襪靴撞曳�(?)の返隈となった。

HTTPリクエスト
?=
? 8
HTTPリクエスト
?=
? 1
5

遺皆皆や逮壊ファイルも揖じ�
? 恷除だと、jsやcssの
ファイル方も��紗�

? jQueryプラグインを
謹方聞喘する��呂�
廣吭�

6

遺鞄姻看馨艶のツ�`ルで鳩範�
? 0.5secだと、繁は�W决を湖じないらしい。
? 0.2secスピ�`ドを貧げるだけで�喇呂睦壱�も�

7

逮壊や界壊壊のファイルをビルドする
�_�k 巷�_
�
?ビルド��

all.js

�
?ビルド��

all.css

8

ビルドがしてくれる並
? Concat
?
?-?�\
?�B�Y
�}方のファイルを1つにまとめる。

? Minify
?
?-?�\
?�R�s
コメントや個佩を茅肇。�篳�獷盒命s。

? Lint
?-?�\
?猟隈チェック �y�i晒´
猟挑のセミコロン�iけなどをチェック�
Sass´
? Unit
?Test
?-?�\
?ユニットテスト Co?ee
?Script´
エンバグやレベルダウンをチェック� 麿にも弼？´
9

乙姻顎稼岳.逮壊を編してみる

? jQuery1.8でビルドツ�`ルとして�駻叩�
? 恬撹宀がjQuery�_�kメンバ�`らしいです。
? 麿にRequireJSなどがあります。
10

逮河顎艶姻霞の乙姻顎稼岳を鳩範
git clone git://github.com/jquery/jquery.git

src �_�k喘のファイルを鯉�{するフォルダ

dist コンパイルしたファイルの竃薦枠

grunt.js grunt.jsファイル

node_module Node.jsのモジュ�`ル喘のフォルダ

package.json Node.jsのバ�`ジョン砿尖吉を峺協するフォルダ

11


�B�Yされたファイル

貧�ファイルを�R�s

�_�k�rのファイル

grunt.js

12

node_modules
Node.jsのモジュ�`ルを
鯉�{するフォルダ

pacage.json
バ�`ジョン
砿尖喘のファイル

13

乙姻顎稼岳ことはじめ
1.node.jsとgruntのインスト�`ル
?
いわゆる仝�\い鮫中々を聞います。(護��)

2.grunt.jsファイルの恬撹
このファイルにタスクを�峰。

3.タスクをコマンドで�g佩
タスクはビルド��ファイル、恬�I坪否、ビルド瘁の
ファイル竃薦枠などの峺協します。

14

�\い鮫中が逗返な繁喘
? CodeKit h&p://incident57.com/codekit/

? 25ドル

Mac�協みたい´
(??ω?�)
15

遺看糸艶悪庄岳と赫姻顎稼岳の曳熟
h&p://havelog.ayumusato.com/develop/others/e524-?�\yeoman_and_brunch.html

16

酒�gなサンプルで編してみる
? サンプルフォルダとファイルを��

dist
/*
?comment
?*/
funcRon
?hoge(){

?
?
?
?alert('hoge!');
src
sample1.js }

grunt.js
/*
?comment
?*/
funcRon
?fuga(){

?
?
?
?alert('fuga!');
sample2.js }

17

? サンプルフォルダとファイルを��
module.exports
?=
?funcRon(grunt)
?{
dist ...

?
?
?
?grunt.initCon?g({

?
?
?
?
?
?
?
?concat:
?{
src
?
?
?
?
?
?
?
?
?
?
?
?built:
?{

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?src:
?['src/sample1.js',
?'src/sample2.js'],

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?dest:
?'dist/built.js'

?
?
?
?
?
?
?
?
?
?
?
?}
grunt.js

?
?
?
?
?
?
?
?},

?
?
?
?});

?
?
?
?grunt.registerTask('build',
?'concat');
}

18

$
?grunt
?build
?
?
?#コマンドを�g佩してbuilt.jsを伏撹

/*
dist
?*
?comment
built.js

?*/
伏撹 funcRon
?hoge(){
src
?
?
?
?alert('hoge!');
}
/*

?*
?comment
grunt.js

?*/
funcRon
?fuga(){

?
?
?
?alert('fuga!');
}

19

? 枠ほどのgrunt.jsにminifyを弖紗
module.exports
?=
?funcRon(grunt)
?{
dist ...

?
?
?
?grunt.initCon?g({

?
?
?
?
?
?
?
?concat:
?{´
?
?
?
?},
src
?
?
?
?
?
?
?
?min:
?{

?
?
?
?
?
?
?
?
?
?
?
?dist:
?{

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?src:
?'dist/built.js',

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?dest:
?'dist/bilt.min.js'
grunt.js

?
?
?
?
?
?
?
?
?
?
?
?}

?
?
?
?
?
?
?
?},

?
?
?
?});

?
?
?
?'concat
?min');
}
20

$
?grunt
?build
?
?
?#壅業コマンドを�g佩してbuilt.min.jsを伏撹

dist
built.js

src

funcRon
?hoge(){alert("hoge!")}funcRon
?fuga()
grunt.js {alert("fuga!")};
built.min.js

伏撹

21

字嬬を��嫖してみる
? SCSSファイルのコンパイル�C嬬をgruntに
弖紗する。
? �_�k堀業も互堀晒�

22

? scssのファイルを��
$blue:
?#3bbfce;
css scss $margin:
?16px;
sample1.scss .content-?�\navigaRon
?{

?
?border-?�\color:
?$blue;

?
?color:

?
?
?
?darken($blue,
?9%);?´(福待)

table.hl
?{
grunt.js
?
?margin:
?2em
?0;
sample2.scss
?
?td.ln
?{

?
?
?
?text-?�\align:
?right;

?
?}
}?´(福待)

23

$npm
?install
?grunt-?�\sass?#��C嬬をインスト�`ル

module.exports
?=
?funcRon(grunt){
css
?
?
?
?grunt.loadNpmTasks('grunt-?�\sass');
?
scss

?
?
?
?grunt.initCon?g({

?
?
?
?
?
?
?
?concat:
?{´
?
?
?
?},

?
?
?
?
?
?
?
?min:
?{´
?
?
?
?},

?
?
?
?
?
?
?
?sass:
?{

?
?
?
?
?
?
?
?
?
?
?
?dist:
?{

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
??les:
?{'css/sample.css':
?

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?['css/scss/sample1.scss',
?'css/scss/sample2.scss']
grunt.js
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?}

?
?
?
?
?
?
?
?
?
?
?
?}

?
?
?
?
?
?
?
?},

?
?
?
?});

?
?
?
?'concat
?min');

?
?
?
?grunt.registerTask('style',
?'sass');
}
24

.content-?�\navigaRon
?{

?
?border-?�\color:
?#3bbfce;

?
?color:
?#2ca2af;
?}

css scss .border
?{

?
?padding:
?8px;

?
?margin:
?8px;

?
?border-?�\color:
?#3bbfce;
?}

table.hl
?{

?
?margin:
?2em
?0;
?}

?
?table.hl
?td.ln
?{
grunt.js sample.css
?
?
?
?text-?�\align:
?right;
?}

伏撹 li
?{

?
?font-?�\family:
?serif;

?
?font-?�\weight:
?bold;

?
?font-?�\size:
?1.2em;
?}

25

? その麿にも弼？
�C
?Data
?URI
? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEU

�C
?Less
�C
?Co?eeScript
�C
?etc´ grunt.jsの巷塀サイトから冥せます。

26

敬温岳界鞄でファイルを酌篇

1. �O��を�Q協する
css
2. �O��が厚仟された�rに
src �g佩したいタスクを鞠�h

3. watchコマンドを�g佩して�O�を
grunt.js �_兵する。

27


module.exports
?=
?funcRon(grunt)
?{...
css
?
?
?
?grunt.initCon?g({´

?
?
?
?
?
?
?
?watch:
?{

?
?
?
?
?
?
?
?
?
?css:
?{ cssの�O�
src
?
?
?
?
?
?
?
?
?
?
?
?
?
??les:['css/scss/*.scss'],

?
?
?
?
?
?
?
?
?
?
?
?
?
?tasks:
?'sass'

?
?
?
?
?
?
?
?
?
?},

?
?
?
?
?
?
?
?
?
?js:
?{ jsの�O�
grunt.js
?
?
?
?
?
?
?
?
?
?
?
?
?
??les:['src'],

?
?
?
?
?
?
?
?
?
?
?
?
?
?tasks:
?'concat
?min'

?
?
?
?
?
?
?
?
?
?}

?
?
?
?
?
?
?
?},

?
?
?
?´});
}
28

$grunt
?watch?#�O�を�g佩
�O�を�_兵 Running
?"watch"
?task
WaiRng...OK
sample1.scssの厚仟 >>
?File
?"css/scss/sample1.scss"
?renamed.
◎
sassタスク徭��g佩 Running
?"sass:dist"
?(sass)
?task
Uncompressed
?size:
?886
?bytes.
Compressed
?size:
?381
?bytes
?gzipped
?(796
?bytes
?mini?ed).

sample1.jsの厚仟 >>
?File
?"src/sample1.js"
?renamed.
◎
concatタスク Running
?"concat:built"
?(concat)
?task
minタスク File
?"dist/built.js"
?created.
徭��g佩
Running
?"min:dist"
?(min)
?task
File
?"dist/bilt.min.js"
?created.
Uncompressed
?size:
?125
?bytes.
Compressed
?size:
?66
?bytes
?gzipped
?(75
?bytes
?mini?ed).
29

酌篇�ブラウザ徭強リロ�`ド

1. �O�によって厚仟を�返�
css
2. Chrome吉の��C嬬に宥岑
src 3. ��C嬬がブラウザを徭�啜弔�
リロ�`ド
grunt.js

LiveReload

30

? LiveReload
?-?�\
?ブラウザの��C嬬
LiveReload

31

$npm
?install
?grunt-?�\reload?#リロ�`ド�C嬬をインスト�`ル

module.exports
?=
?funcRon(grunt){´

?
?
?
?grunt.loadNpmTasks('grunt-?�\reload');
?
css
?
?
?
?grunt.initCon?g({

?
?
?
?
?
?
?watch:
?{

?
?
?
?
?
?
?
?
?
?css:
?{

?
?
?
?
?
?
?
?
?
?
?
?
?
??les:['css/scss/*.scss'],
src
?
?
?
?
?
?
?
?
?
?
?
?
?
?tasks:
?'sass
?reload'

?
?
?
?
?
?
?
?
?
?},

?
?
?
?
?
?
?
?
?
?js:
?{

?
?
?
?
?
?
?
?
?
?
?
?
?
??les:['src'],
grunt.js
?
?
?
?
?
?
?
?
?
?
?
?
?
?tasks:
?'concat
?min
?reload'

?
?
?
?
?
?
?
?
?
?}

?
?
?
?
?
?
?
?},

?
?
?
?});

?
?
?
?´
}
32


module.exports
?=
?funcRon(grunt){´

?
?
?
?grunt.initCon?g({
css
?
?
?
?
?
?
?
?´

?
?
?
?
?
?
?
?server
?:
?{

?
?
?
?
?
?
?
?
?
?
?
?port:
?8000,

?
?
?
?
?
?
?
?
?
?
?
?base:'.'
src
?
?
?
?
?
?
?
?},

?
?
?
?
?
?
?
?reload:
?{

?
?
?
?
?
?
?
?
?
?
?
?port:
?35729,
?//
?LiveReloadで聞喘するポ�`ト

grunt.js
?
?
?
?
?
?
?
?
?
?
?
?liveReload:
?true

?
?
?
?
?
?
?
?}

?
?
?
?});

?
?
?
?´

?
?
?
?grunt.registerTask('develop',
?['server',
?'reload',
?'watch']);
}

33

まとめ

? WEBサイトと�_�k、�I圭を互堀晒しよう�
? チ�`ムでビルドツ�`ルの�y匯が駅勣
? 晩�M埖�iで肝？と仟しい室�gが
???????????(?�ω��)????

34

ご賠�、
ありがとうございました

35

際際滷

安艶恢サイト?フロントエント?の互堀晒と乙姻顎稼岳.逮壊について

More Related Content

安艶恢サイト?フロントエント?の互堀晒と乙姻顎稼岳.逮壊について