Upload
leveragesevent
View
139
Download
4
Embed Size (px)
Citation preview
自己紹介
● 金融系 -> 組み込み系 -> SNS 系 -> ゲーム系 -> 広告系を経て DMMへ
● 得意分野はインフラからフロントエンドまで、本業は ServerSideエンジ
ニア。デザインは無理
● 大規模システムのアーキテクト、大規模データ基盤の構築周り
● DMMでは検索・リコメンド・行動解析まわりの研究開発やってます。
● 最近は java,hdfs,hive,python,nodejs,scala,erlang,spark,aerospike周りを
良く触ってます。
DMMで困ってた事は何か?
● jsファイルのminifyを忘れてリリース失敗する
● テストを作ったけど、忙しくなって誰も流さなくなる
● チェックスタイル作ったけど形骸化する
● リリース手順とかリリースする頃には忘れる
● リリース手順書が古くリリース手順通りにやったらリリース失敗する
● バグの修正5分で終わるのにリリースに 1時間かかる
●jsファイルのminifyを忘れてリリース失敗する
●テストを作ったけど、忙しくなって誰も流さなくなる
●チェックスタイル作ったけど形骸化する
●リリース手順とかリリースする頃には忘れる
●リリース手順書が古くリリース手順通りにやったらリリース失敗する
●バグの修正5分で終わるのにリリースに 1時間かかる
どこに時間を使うべきか?
● リリース・コンパイル等、繰り返し作業に人手を使わない
● ドキュメントの生成・コードチェック・テストは自動化し
、形骸化させない
● 特定の人しか出来ない作業を作らない
● 仕様書・手順書は最低限作り、設定ファイルをベースにす
る
気をつける(た)所
どこに時間を使うべきか?
● 1日数回のリリースも可能、しかも品質は一定
● 自動なので docs,コードチェック ,テストを意識しなくても良い
● ボタン押すだけなら誰(エンジニア以外)でも出来る
● 仕様書・手順書のメンテコストが無い
得られたメリットは何か?
機能開発・研究開発というエンジニアの本来の業務時間を作る
Gruntのおさらい
● jsのminify等の繰り返し作業の自動化
● Pluginを追加して機能を拡張
● Gruntを中心としたエコシステム
uglify
copy
concat
add
ad d
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({
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
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
省略無しバージョン
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
省略無しバージョン
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