2013-11-15

angular.jsをminifyする前にngminしないとアカン話


最近angular.jsを使い始めて、ただ使うだけでなくリリース時にminifyまでやるにあたって注意点があったのでメモ。

まぁほとんどココの"A Note on Minification"で書いてある事+ちょっとだけの内容です。入門の話とかじゃあない。

angular.jsを使うにあたって

angular.jsを使ってソースコードを書くとき、決まった書き方があって大体こんな感じになる。
angular.module('whatever').controller('MyCtrl', function ($scope, $http) { ... });
だけどコレをそのままminifyしてしまうと$scopeや$httpといったangular.jsで予約された変数名がaとかbとか変な文字に変換されてしまいます。
angular.jsでは$scopeってのは決められた変数になってるので、$skopeとかtypoしたらダメらしいす。
せっかくこんなに簡単にインジェクションな処理が書けて嬉しかったのに、これの回避策としてこんな書き方をすれば良いとのこと。
angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);
ちょっとめんどくさいですね。'$scope'書いた後に$scopeってまた書きます。
同じ変数名2回書くとか絶対やりたくないですね。
という訳でこれをやらないためにngminというステキなツールがあったので使ってみました。

ngminとは

ngminはangular.jsのminifyを行う前に、上記のようなminifyにも耐えうる書き方に変換してくれるpre-minifyツールです。

実際使うときはGruntと一緒に使うのが便利。
grunt-ngminっていうのがちゃんとありました。gruntマジステキ。



grunt-ngmin使ってみた

さすがgruntさん。一回覚えれば使い方も一緒なので超簡単。
githubのreadmeからそのままコピペするとこんな感じでした。
ngmin: {
  controllers: {
    src: ['test/src/controllers/one.js'],
    dest: 'test/generated/controllers/one.js'
  },
  directives: {
    expand: true,
    cwd: 'test/src',
    src: ['directives/**/*.js'],
    dest: 'test/generated'
  }
},
gruntのタスクとしてngminを用意して、angular.jsのスタイルガイドで提唱されてるcontrollersとかdirectivesっていう構成毎にngminを実行する書き方ですね。

実際は build/ みたいなディレクトリをdestとして指定しておいて、この後にuglifyでbuild/ 内にminifyをかけたりしてからデプロイしています。

まとめ?

実際にやった結果とかは割愛しますが、お手軽にangular.jsの実装をminify対策させることが出来ました。
書くコードは最小限で、リリースされるコードは自動で効率優先なものに!スバラシイですね!

angular.js自体まだまだ触りきれてないのですが、一旦このへんの検証など済ませた感じです。
穴など見つけたら追記しますね。