2015年頃？のJSビルド環境について。今となってはかなり古い内容です。

1. JSの開発で最近やったこと

2. Agenda
1. 何をしたか
2. 使うことにしたツール

3. 何をしたか

4. まとめ
JSをビルドするようにしました
機械語に変換するわけじゃない
⾃動的に処理したいことをまとめてやる
例︓
JSやCSSの結合、minify、ソースマップの作成
AltJSやSassのコンパイル
やれることが増えました

5. 前提
現在のチーム事情
クライアントサイドはAngularJS
サーバサイドはJava EE

6. プロジェクトの分離
今まではサーバサイドとひとまとめだった
htmlやJSの修正確認には、javaのビルドも必要
分離することで、フロントエンド単独でビルドできる
でも結局は
デプロイはワンバイナリでやりたい
サーバサイドのビルドは必要

7. ビルドのためのディレクトリ構成
./tsubomi-site-frontend
├ src ... 開発者が触るディレクトリ
├ dist ... ビルドの成果物を格納
├ test ... テストコードを格納
└ package.json ... 各種ツールが読む設定ファイル
karma.conf.js
gulpfile.js

8. srcの下はこんな感じ
src
├ css
├ img
├ templates
├ js
│ ├ lib
│ ├ controller
│ ├ directive
│ ├ filter
│ └ service
└ index.html

9. JSのバンドル
テンプレートと同じ数だけJSファイルが存在していた
画⾯1枚(テンプレート1個) == JS1個で分かりやすい
同じディレクトリにlogin.jsとlogin.tplがある
ブラウザにとっては、いくつもファイルをダウンロード
しなくてはいけない
パフォーマンスの悪化を招く
増えたファイルはビルド時に1個にまとめる
これをバンドルという
ブラウザのリクエスト数が減ってハッピー

10. ユニットテスト
していなかった
ちょっとした修正もデプロイして動かすまで不安
これからはします
ファイルを監視しておくと、常時テストが⾛るよう
になる
簡単な失敗はすぐ分かる

11. キャッシュ
いままで
機能を追加しても、古いJSやテンプレートがキャッ
シュとして残っていて動かない
そもそもキャッシュ無効にするとパフォーマンス
悪い
ファイル名にファイルのハッシュ値を加える
ファイルに変更があればハッシュ値が変わる
ファイル名が変わるので、ブラウザはリクエスト
を投げる
いわゆるcache bust
変更がなければファイル名は変わらない
ブラウザはキャッシュしたものを使ってよい

12. 使うことにしたもの

13. ビルドにつかうツール
node
エコシステムの中⼼
npm
nodeモジュールのパッケージ管理ツール
gulp
ビルドツール/タスクランナー
今年になってからネガティブな話題
Grunt/Gulpで憔悴したおっさんの話 - MOL
最近のビルドツールって何なの︖ - 檜⼭正幸のキ
マイラ飼育記

14. ビルドにつかうツール
karma
テストランナー
Jenkinsでも使える
GUIのない環境でもよい(PhantomJS)
テスト結果をxmlに出⼒(jenkins⽤)
ファイル監視してtestが⾛ると便利
jasmine
テスティングフレームワーク
ここは何でもいいと思った
rspecぽく書ける

15. おまけ︓使わないことにしたもの
grunt
後発のgulpの⽅が分かりやすい
browserify
AngularJSはrequireを使わない
bable, coffee script, typescript
素のJSを書けるようになりたいので
bower
なんとなく…
webpack
多機能なものを避けてた…