GruntでJavaScript 前作業の自動化！

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

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

本日のお品書き
1. どうして自動化するのか（１０分）

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

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

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

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

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

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

自動化レイヤの確認
● いろんなレイヤで自動化
● いろんなレイヤで自動化

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

本日のお品書き

Grunt の環境構築
npm install -g grunt-cli
mkdir hikarabo && cd hikarabo
npm init
npm install grunt --save
npm install -g grunt-cli
mkdir hikarabo && cd hikarabo
npm init
npm install grunt --save
● 出来上がった package.json

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

最初の 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 コマンドで実行

複数の js ファイルを concat して結合する
grunt.initConfig({
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

js ファイルを minify してファイルサイズを小さくする
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-uglify');
grunt.registerTask('default',['concat:hikajs','uglify']);
3. grunt で実行
npm install grunt-contrib-uglify --save
省略無しバージョン

js ファイルを copy して公開準備をする
grunt.initConfig({
（略 )
copy:{
main: {
src:'build/*.min.js',
dest: 'public/js/'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default',['concat:hikajs','uglify','copy']);
};
3. grunt で実行
npm install grunt-contrib-copy --save

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 をインストール
4. grunt build で実行
npm install yuidocjs -g
npm install grunt-contrib-yuidoc --save

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']);
};
3. .gjslintrc を作成
4. grunt で実行
npm install grunt-gjslint --save
失敗時
成功時
.gjslintrc

js ファイルの変更時に自動で処理するようにする
（略 )
watch: {
files: [
'source/*.js',
],
tasks: [
'gjslint',
'concat:hikajs',
'uglify',
'copy',
]
},
( 略 )
grunt.loadNpmTasks('grunt-contrib-watch');
};
3. grunt watch を実行
npm install grunt-contrib-watch --save

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

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

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

GruntでJavaScript 前作業の自動化！

More Related Content

What's hot

Viewers also liked

Similar to GruntでJavaScript 前作業の自動化！

More from leverages_event

GruntでJavaScript 前作業の自動化！