gruntでjavascript 前作業の自動化！

Gruntで JavaScript前作業の自動化！

2014.01.16CTO 室田中裕一

自己紹介

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

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

ニア。デザインは無理

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

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

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

良く触ってます。

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

1.どうして自動化するのか（１０分）1.どうして自動化するのか（１０分）

1.どうして自動化するのか（１０分）

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

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

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

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

DMMで困ってた事は何か？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

、形骸化させない

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

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

る

気をつける（た）所

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

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

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

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

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

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

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

自動化レイヤの確認

● 今回の取り組み全体感

自動化レイヤの確認

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

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

Gruntのおさらい

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

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

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

uglify

copy

concat

add

ad d

いきなり実践

本日のお品書き1.どうして自動化するのか1.どうして自動化するのか



Gruntの環境構築

npm install -g grunt-climkdir hikarabo && cd hikarabonpm initnpm install grunt --save

npm install -g grunt-climkdir hikarabo && cd hikarabonpm initnpm 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して結合する

module.exports = function(grunt) {

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

省略無しバージョン

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


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

};

1. npmコマンドで pluginをインストール2. Gruntfile.jsを編集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');

};

1. npmコマンドで pluginをインストール2. Gruntfile.jsを編集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 -gbower initbower install jqeury --save

{

"name": "hikarabo",

"version": "0.0.0",

"authors": [

"tanaka-yuichi <[email protected]>"

],

（略）

出来上がった 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 前作業の自動化！

Documents