Embed Size (px)
Citation preview
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ファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
DMMで困ってた事は何か？
● jsファイルのminifyを忘れてリリース失敗する
● テストを作ったけど、忙しくなって誰も流さなくなる
● チェックスタイル作ったけど形骸化する
● リリース手順とかリリースする頃には忘れる
● リリース手順書が古くリリース手順通りにやったらリリース失敗する
● バグの修正５分で終わるのにリリースに 1時間かかる
リリースがリスキーで面倒 !
1.どうして自動化するのか1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
どこに時間を使うべきか？
● リリース・コンパイル等、繰り返し作業に人手を使わない
● ドキュメントの生成・コードチェック・テストは自動化
し、形骸化させない
● 特定の人しか出来ない作業を作らない
● 仕様書・手順書は最低限作り、設定ファイルをベースにす
る
気をつける（た）所
どこに時間を使うべきか？
● 1日数回のリリースも可能、しかも品質は一定
● 自動なので docs,コードチェック ,テストを意識しなくても良い
● ボタン押すだけなら誰（エンジニア以外）でも出来る
● 仕様書・手順書のメンテコストが無い
得られたメリットは何か？
機能開発・研究開発というエンジニアの本来の業務時間を作る
1.どうして自動化するのか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ファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
Gruntのおさらい
● jsのminify等の繰り返し作業の自動化
● Pluginを追加して機能を拡張
● Gruntを中心としたエコシステム
uglifycopy
concat
addad
d
いきなり実践
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
Gruntの環境構築
npm install -g grunt-climkdir hikarabo && cd hikarabonpm initnpm install grunt --save
1. grunt-cliをインストール
2. プロジェクトディレクトリを作って
3. npm initコマンドで package.jsonを作成
しています。
4. npmコマンドで gruntをインストール
※Node.jsのインストールは割愛します。
● package.json出来上がった
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
最初の 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コマンドで実行
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
複数の 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
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
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
省略無しバージョン
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
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
省略無しバージョン
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
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
省略無しバージョン
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
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
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
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
省略無しバージョン
本日のお品書き1.どうして自動化するのか
● DMMで困っていた事は何か？● どこに時間を使うべきか？● 自動化のレイヤの確認● Gruntのおさらい
2.いきなり実践● Gruntの環境構築● 最初の Gruntfile.jsの作成● 複数の jsファイルを concatで結合する● jsファイルをminifyしてファイルサイズを小さくする● jsファイルをコピーして公開準備をする● yuidocを使ってリリース時に Documentを自動生成する● gjslintを使って CodeCheckを自動で行う● jsファイルの変更時に自動で処理するようにする● bower、 bower-installer、 Gruntを使って外部の jsを管理する
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
以上。
