1. WEBサイト・フロントエンドの高速化と
grunt.jsについて
@tomof
1
13年2月8日金曜日

2. 自己紹介
• Twi)er
ID
:
@tomof
• 静岡のSolarisに超強い某社に勤めています。
• jQueryの日本語リファレンスサイトを
運営しています。
h)p://js.studio-­‐kingdom.com/jquery
2
13年2月8日金曜日

3. バージョンの違いに注意
• この資料は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
13年2月8日金曜日

4. フロントエンドの高速化
• WEBサイトの高速化は
バックエンドだけの課題じゃない！
• HTTPのリクエストを減らそう！
参考：h&p://www.inter-­‐office.co.jp/contents/177/
4
13年2月8日金曜日

5. CSSスプライト
• 数年前ぐらいから、HTML,CSSコーディングに
おいては、導入して当然(?)の手法となった。
HTTPリクエスト
=
8
HTTPリクエスト
=
1
5
13年2月8日金曜日

6. CSSやjsファイルも同じ！
• 最近だと、jsやcssの
ファイル数も増加！
• jQueryプラグインを
多数使用する場合も
注意！
6
13年2月8日金曜日

7. Chromeのツールで確認！
• 0.5secだと、人は遅延を感じないらしい。
• 0.2secスピードを上げるだけで売上に影響も？
7
13年2月8日金曜日

8. jsやcssのファイルをビルドする
開発 公開
＼
ビルド！／
all.js
＼
ビルド！／
all.css
8
13年2月8日金曜日

9. ビルドがしてくれる事
• Concat
-­‐
連結
複数のファイルを1つにまとめる。
• Minify
-­‐
圧縮
コメントや改行を除去。変数名も短縮。
• Lint
-­‐
文法チェック 難読化…
文末のセミコロン抜けなどをチェック！
Sass…
• Unit
Test
-­‐
ユニットテスト Coffee
Script…
エンバグやレベルダウンをチェック！ 他にも色々…
9
13年2月8日金曜日

10. grunt.jsを試してみる
• jQuery1.8でビルドツールとして採用。
• 作成者がjQuery開発メンバーらしいです。
• 他にRequireJSなどがあります。
10
13年2月8日金曜日

11. jQueryのgruntを確認
git clone git://github.com/jquery/jquery.git
src 開発用のファイルを格納するフォルダ
dist コンパイルしたファイルの出力先
grunt.js grunt.jsファイル
node_module Node.jsのモジュール用のフォルダ
package.json Node.jsのバージョン管理等を指定するフォルダ
11
13年2月8日金曜日

12. jQueryのgruntを確認
連結されたファイル
上記ファイルを圧縮
開発時のファイル
grunt.js
12
13年2月8日金曜日

13. jQueryのgruntを確認
node_modules
Node.jsのモジュールを
格納するフォルダ
pacage.json
バージョン
管理用のファイル
13
13年2月8日金曜日

14. gruntことはじめ
1.node.jsとgruntのインストール
いわゆる「黒い画面」を使います。(割愛)
2.grunt.jsファイルの作成
このファイルにタスクを記述。
3.タスクをコマンドで実行
タスクはビルド対象ファイル、作業内容、ビルド後の
ファイル出力先などの指定します。
14
13年2月8日金曜日

15. 黒い画面が苦手な人用
• CodeKit h&p://incident57.com/codekit/
• 25ドル
Mac限定みたい…
(´・ω・｀)
15
13年2月8日金曜日

16. CodeKitとGruntの比較
h&p://havelog.ayumusato.com/develop/others/e524-­‐yeoman_and_brunch.html
16
13年2月8日金曜日

17. 簡単なサンプルで試してみる
• サンプルフォルダとファイルを準備
dist
/*
comment
*/
funcRon
hoge(){
alert('hoge!');
src
sample1.js }
grunt.js
/*
comment
*/
funcRon
fuga(){
alert('fuga!');
sample2.js }
17
13年2月8日金曜日

18. 簡単なサンプルで試してみる
• サンプルフォルダとファイルを準備
module.exports
=
funcRon(grunt)
{
dist ...
grunt.initConfig({
concat:
{
src
built:
{
src:
['src/sample1.js',
'src/sample2.js'],
dest:
'dist/built.js'
}
grunt.js
},
});
grunt.registerTask('build',
'concat');
}
18
13年2月8日金曜日

19. 簡単なサンプルで試してみる
$
grunt
build
#コマンドを実行してbuilt.jsを生成
/*
dist
*
comment
built.js
*/
生成 funcRon
hoge(){
src
alert('hoge!');
}
/*
*
comment
grunt.js
*/
funcRon
fuga(){
alert('fuga!');
}
19
13年2月8日金曜日

20. 簡単なサンプルで試してみる
• 先ほどのgrunt.jsにminifyを追加
module.exports
=
funcRon(grunt)
{
dist ...
grunt.initConfig({
concat:
{…
},
src
min:
{
dist:
{
src:
'dist/built.js',
dest:
'dist/bilt.min.js'
grunt.js
}
},
});
grunt.registerTask('build',
'concat
min');
}
20
13年2月8日金曜日

21. 簡単なサンプルで試してみる
$
grunt
build
#再度コマンドを実行してbuilt.min.jsを生成
dist
built.js
src
funcRon
hoge(){alert("hoge!")}funcRon
fuga()
grunt.js {alert("fuga!")};
built.min.js
生成
21
13年2月8日金曜日

22. 機能を拡張してみる
• SCSSファイルのコンパイル機能をgruntに
追加する。
• 開発速度も高速化！
22
13年2月8日金曜日

23. 機能を拡張してみる
• 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
13年2月8日金曜日

24. 機能を拡張してみる
$npm
install
grunt-­‐sass #拡張機能をインストール
module.exports
=
funcRon(grunt){
css
grunt.loadNpmTasks('grunt-­‐sass');
scss
grunt.initConfig({
concat:
{…
},
min:
{…
},
sass:
{
dist:
{
files:
{'css/sample.css':
['css/scss/sample1.scss',
'css/scss/sample2.scss']
grunt.js
}
}
},
});
grunt.registerTask('build',
'concat
min');
grunt.registerTask('style',
'sass');
}
24
13年2月8日金曜日

25. 機能を拡張してみる
.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
13年2月8日金曜日

26. 機能を拡張してみる
• その他にも色々
–
Data
URI
'data:image/png;base64,iVBORw0KGgoAAAANSUhEU
–
Less
–
CoffeeScript
–
etc… grunt.jsの公式サイトから探せます。
26
13年2月8日金曜日

27. watchでファイルを監視
1. 監視対象を決定する
css
2. 監視対象が更新された時に
src 実行したいタスクを登録
3. watchコマンドを実行して監視を
grunt.js 開始する。
27
13年2月8日金曜日

28. watchでファイルを監視
module.exports
=
funcRon(grunt)
{...
css
grunt.initConfig({…
watch:
{
css:
{ cssの監視
src
files:['css/scss/*.scss'],
tasks:
'sass'
},
js:
{ jsの監視
grunt.js
files:['src'],
tasks:
'concat
min'
}
},
…});
}
28
13年2月8日金曜日

29. watchでファイルを監視
$grunt
watch #監視を実行
監視を開始 Running
"watch"
task
WaiRng...OK
sample1.scssの更新 >>
File
"css/scss/sample1.scss"
renamed.
↓
sassタスク自動実行 Running
"sass:dist"
(sass)
task
Uncompressed
size:
886
bytes.
Compressed
size:
381
bytes
gzipped
(796
bytes
minified).
sample1.jsの更新 >>
File
"src/sample1.js"
renamed.
↓
concatタスク Running
"concat:built"
(concat)
task
minタスク File
"dist/built.js"
created.
自動実行
Running
"min:dist"
(min)
task
File
"dist/bilt.min.js"
created.
Uncompressed
size:
125
bytes.
Compressed
size:
66
bytes
gzipped
(75
bytes
minified).
29
13年2月8日金曜日

30. 監視＋ブラウザ自動リロード
1. 監視によって更新を検知
css
2. Chrome等の拡張機能に通知
src 3. 拡張機能がブラウザを自動的に
リロード
grunt.js
LiveReload
30
13年2月8日金曜日

31. 監視＋ブラウザ自動リロード
• LiveReload
-­‐
ブラウザの拡張機能
LiveReload
31
13年2月8日金曜日

32. 監視＋ブラウザ自動リロード
$npm
install
grunt-­‐reload #リロード機能をインストール
module.exports
=
funcRon(grunt){…
grunt.loadNpmTasks('grunt-­‐reload');
css
grunt.initConfig({
watch:
{
css:
{
files:['css/scss/*.scss'],
src
tasks:
'sass
reload'
},
js:
{
files:['src'],
grunt.js
tasks:
'concat
min
reload'
}
},
});
…
}
32
13年2月8日金曜日

33. 監視＋ブラウザ自動リロード
module.exports
=
funcRon(grunt){…
grunt.initConfig({
css
…
server
:
{
port:
8000,
base:'.'
src
},
reload:
{
port:
35729,
//
LiveReloadで使用するポート
grunt.js
liveReload:
true
}
});
…
grunt.registerTask('develop',
['server',
'reload',
'watch']);
}
33
13年2月8日金曜日

34. まとめ
• WEBサイトと開発、両方を高速化しよう！
• チームでビルドツールの統一が必要
• 日進月歩で次々と新しい技術が
(´；ω；｀)ﾌﾞﾜｯ
34
13年2月8日金曜日

35. ご清聴、
ありがとうございました
35
13年2月8日金曜日