gruntでjava script前作業の自動化！

GruntでJavaScript前作業の自動化！

2014.01.16CTO室田中裕一

自己紹介

● 金融系 -> 組み込み系 -> SNS系 -> ゲーム系 -> 広告系を経てDMMへ

● 得意分野はインフラからフロントエンドまで、本業はServerSideエンジニ

ア。デザインは無理

● 大規模システムのアーキテクト、大規模データ基盤の構築周り

● DMMでは検索・リコメンド・行動解析まわりの研究開発やってます。

● 最近はjava,hdfs,hive,python,nodejs,scala,erlang,spark,aerospike周りを良

く触ってます。

本日のお品書き

1.どうして自動化するのか（１０分）● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい

2.いきなり実践（３０分）● Gruntの環境構築● 最初のGruntfile.jsの作成● 複数のjsファイルをconcatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時にDocumentを自動生成する● gjslintを使ってCodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする

● bower、bower-installer、Gruntを使って外部のjsを管理する

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

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

1.どうして自動化するのか● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい

2.いきなり実践● Gruntの環境構築● 最初のGruntfile.jsの作成● 複数のjsファイルをconcatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時にDocumentを自動生成する● gjslintを使ってCodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする


DMMで困ってた事は何か？

● jsファイルのminifyを忘れてリリース失敗する

● テストを作ったけど、忙しくなって誰も流さなくなる

● チェックスタイル作ったけど形骸化する

● リリース手順とかリリースする頃には忘れる

● リリース手順書が古くリリース手順通りにやったらリリース失敗する

● バグの修正５分で終わるのにリリースに1時間かかる

リリースがリスキーで面倒!

どこに時間を使うべきか？

● リリース・コンパイル等、繰り返し作業に人手を使わない

● ドキュメントの生成・コードチェック・テストは自動化し、

形骸化させない

● 特定の人しか出来ない作業を作らない

● 仕様書・手順書は最低限作り、設定ファイルをベースにす

る

気をつける（た）所

どこに時間を使うべきか？

● 1日数回のリリースも可能、しかも品質は一定

● 自動なのでdocs,コードチェック,テストを意識しなくても良い

● ボタン押すだけなら誰（エンジニア以外）でも出来る

● 仕様書・手順書のメンテコストが無い

得られたメリットは何か？

機能開発・研究開発というエンジニアの本来の業務時間を作る

自動化レイヤの確認

● 今回の取り組み全体感

自動化レイヤの確認

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

● 今日の取り扱い

Gruntのおさらい

● jsのminify等の繰り返し作業の自動化

● Pluginを追加して機能を拡張

● Gruntを中心としたエコシステム

uglify

copy

concat

add

add

いきなり実践

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

https://gist.github.com/yuichi-tanaka/75f017cc73d26aa7aef0

最初の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']);


1. npmコマンドでpluginをインストール2. Gruntfile.jsを編集3. gruntで実行

npm install grunt-contrib-uglify --save

省略無しバージョン

https://gist.github.com/yuichi-tanaka/4724789d7d47a72266a1

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']);


};

1. npmコマンドでpluginをインストール2. Gruntfile.jsを編集3. gruntで実行

npm install grunt-contrib-copy --save


https://gist.github.com/yuichi-tanaka/155f14155a0a2a67c39d

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


https://gist.github.com/yuichi-tanaka/7085b7fac11f2e69f25f

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

https://gist.github.com/yuichi-tanaka/eae3986a4743834bc068

https://gist.github.com/yuichi-tanaka/2d708264de385ab45661

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


https://gist.github.com/yuichi-tanaka/c328c7160f70c50cb871

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 <[email protected]>"

],

（略）

出来上がったbower.json

https://gist.github.com/yuichi-tanaka/824d8698dec639a23e54

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でjava script前作業の自動化！

Engineering