ヒカラボ2015-01-16 presented by DMM

1. GruntでJavaScript前作業
の自動化！
2014.01.16
CTO室 田中裕一

2. 自己紹介
● 金融系 -> 組み込み系 -> SNS系 -> ゲーム系 -> 広告系を経てDMMへ
● 得意分野はインフラからフロントエンドまで、本業はServerSideエンジニ
ア。デザインは無理
● 大規模システムのアーキテクト、大規模データ基盤の構築周り
● DMMでは検索・リコメンド・行動解析まわりの研究開発やってます。
● 最近はjava,hdfs,hive,python,nodejs,scala,erlang,spark,aerospike周りを良
く触ってます。

3. 本日のお品書き
1.どうして自動化するのか（１０分）
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践（３０分）
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

4. どうして自動化するのか?

5. 1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

6. DMMで困ってた事は何か？
● jsファイルのminifyを忘れてリリース失敗する
● テストを作ったけど、忙しくなって誰も流さなくなる
● チェックスタイル作ったけど形骸化する
● リリース手順とかリリースする頃には忘れる
● リリース手順書が古くリリース手順通りにやったらリリース失敗する
● バグの修正５分で終わるのにリリースに1時間かかる
リリースがリスキーで面倒!

7. 1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

8. どこに時間を使うべきか？
● リリース・コンパイル等、繰り返し作業に人手を使わない
● ドキュメントの生成・コードチェック・テストは自動化し、
形骸化させない
● 特定の人しか出来ない作業を作らない
● 仕様書・手順書は最低限作り、設定ファイルをベースにす
る
気をつける（た）所

9. どこに時間を使うべきか？
● 1日数回のリリースも可能、しかも品質は一定
● 自動なのでdocs,コードチェック,テストを意識しなくても良い
● ボタン押すだけなら誰（エンジニア以外）でも出来る
● 仕様書・手順書のメンテコストが無い
得られたメリットは何か？
機能開発・研究開発というエンジニアの本来の業務時間を作る

10. 1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

11. 自動化レイヤの確認
● 今回の取り組み全体感

12. 自動化レイヤの確認
● いろんなレイヤで自動化
● 今日の取り扱い

13. 1.どうして自動化するのか
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

14. Gruntのおさらい
● jsのminify等の繰り返し作業の自動化
● Pluginを追加して機能を拡張
● Gruntを中心としたエコシステム
uglify
copy
concat
add
add

15. いきなり実践

16. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

17. Gruntの環境構築
npm install -g grunt-cli
mkdir hikarabo && cd hikarabo
npm init
npm install grunt --save
1. grunt-cliをインストール
2. プロジェクトディレクトリを作って
3. npm initコマンドでpackage.jsonを作成し
ています。
4. npmコマンドでgruntをインストール
※Node.jsのインストールは割愛します。
● 出来上がったpackage.json

18. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

19. 最初のGruntfile.jsの作成
今回扱うディレクトリ構造
1. build : minifyしたjs等、output先
2. out : Docsの吐き出し先
3. public : リリースdir外部から参照される
4. source : 大本になるjsファイル置き場

20. 最初のGruntfile.jsの作成
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
grunt.registerTask('default','show logs',function(){
grunt.log.write('console log?').ok();
});
};
1. Gruntfile.jsの名前で保存
2. gruntコマンドで実行

21. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

22. 複数のjsファイルをconcatして結合する
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat:{
hikajs: {
src: [
'source/main.sample.js',
'source/main2.sample.js',
],
dest: 'build/concat.hikarabo.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default',['concat:hikajs']);
grunt.registerTask('default:concat', ['concat:hikajs']);
1. npmコマンドでpluginをインストール
2. Gruntfile.jsを編集
3. grunt又はgrunt concatで実行
npm install grunt-contrib-concat --save

23. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

24. jsファイルをminifyしてファイルサイズを小さくする
module.exports = function(grunt) {
grunt.initConfig({
（略)
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%=
grunt.template.today("yyyy-mm-dd") %> */¥n'
},
build: {
src: 'build/concat.hikarabo.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default',['concat:hikajs','uglify']);
grunt.registerTask('default:concat', ['concat:hikajs']);
1. npmコマンドでpluginをインストール
2. Gruntfile.jsを編集
3. gruntで実行
npm install grunt-contrib-uglify --save
省略無しバージョン

25. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

26. jsファイルをcopyして公開準備をする
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
（略)
copy:{
main: {
src:'build/*.min.js',
dest: 'public/js/'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default',['concat:hikajs','uglify','copy']);
grunt.registerTask('default:concat', ['concat:hikajs']);
};
1. npmコマンドでpluginをインストール
2. Gruntfile.jsを編集
3. gruntで実行
npm install grunt-contrib-copy --save
省略無しバージョン

27. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

28. yuidocを使ってリリース時にDocumentを自動生成する
（略)
yuidoc: {
compile: {
name: '<% pkg.name %>',
description: '<%= pkg.description %>',
version: '<%= pkg.version %>',
url: '<%= pkg.homepage %>',
options: {
paths: [
'source/'
],
outdir: 'out/'
}
(略)
grunt.loadNpmTasks('grunt-contrib-yuidoc');
(略)
grunt.registerTask('build', ['yuidoc']);
};
1. npmコマンドでyuidocをインストール
2. npmコマンドでpluginをインストール
3. Gruntfile.jsを編集
4. grunt buildで実行
npm install yuidocjs -g
npm install grunt-contrib-yuidoc --save
省略無しバージョン

29. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

30. gjslingを使ってCodeCheckを自動で行う
（略)
gjslint: {
options: {
flags: [
'--flagfile .gjslintrc'
],
reporter: {
name: 'console'
}
},
lib: {
src: [
'source/*.js'
]
}
}
(略)
grunt.loadNpmTasks('grunt-gjslint');
grunt.registerTask('default',['gjslint','concat:hikajs','uglify','copy']);
};
1. npmコマンドでpluginをインストール
2. Gruntfile.jsを編集
3. .gjslintrcを作成
4. gruntで実行
npm install grunt-gjslint --save
省略無しバージョン
失敗時
成功時
.gjslintrc

31. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

32. jsファイルの変更時に自動で処理するようにする
（略)
watch: {
files: [
'source/*.js',
],
tasks: [
'gjslint',
'concat:hikajs',
'uglify',
'copy',
]
},
(略)
grunt.loadNpmTasks('grunt-contrib-watch');
};
1. npmコマンドでpluginをインストール
2. Gruntfile.jsを編集
3. grunt watchを実行
npm install grunt-contrib-watch --save
省略無しバージョン

33. 本日のお品書き
1.どうして自動化するのか
● DMMで困っていた事は何か？
● どこに時間を使うべきか？
● 自動化のレイヤの確認
● Gruntのおさらい
2.いきなり実践
● Gruntの環境構築
● 最初のGruntfile.jsの作成
● 複数のjsファイルをconcatで結合する
● jsファイルをminifyしてファイルサイズを小さくする
● jsファイルをコピーして公開準備をする
● yuidocを使ってリリース時にDocumentを自動生成する
● gjslintを使ってCodeCheckを自動で行う
● jsファイルの変更時に自動で処理するようにする
● bower、bower-installer、Gruntを使って外部のjsを管理する

34. bower,bower-installer,gruntを使って外部のjsを管理する
● webAppは様々なframework,libraryで構成されている
● bowerはそれらpackageの管理をする
● Bower+gruntで外部packageの管理も自動化

35. Bowerの準備とjQueryのインストール
1. npmコマンドでBowerをインストール
2. bower initを実行
3. bowerでjqueryをインストール
npm install bower -g
bower init
bower install jqeury --save
{
"name": "hikarabo",
"version": "0.0.0",
"authors": [
"tanaka-yuichi <tanaka-yuichi@dmm.com>"
],
（略）
出来上がったbower.json

36. Bower-installerの準備と公開ディレクトリへのデプロイ
1. npmコマンドでBower-installerをインストール
2. bower.jsonにinstallセクションを追加
3. bower-installerを実行
npm install bower-installer -g
（略）
"dependencies": {
"jquery": "~2.1.3"
},
"install":{
"path":{
"js":"public/js"
},
"sources":{
"jquery":"bower_components/jquery/dist/jquery.min.js"
}
}
}
jqueryのデプロイを追加したbower.json

37. 以上。