AngularJSのminify対策がngminでラクになる


AngularJS の minify 対策、めんどくさい

AngularJS の JavaScript コードを minify するには、function の引数でインジェクト(DI)する各 services の名前を、文字列として重複させて記述する必要がある。

これって、めっちゃめんどくさい。あほらしすぎる。

ngmin

そこで ngmin を使う。

1
npm install -g ngmin
1
ngmin somefile.js somefile.annotate.js

以下のコードが、

somefile.js
1
2
3
4
5
6
7
8
9
angular.module('app', [])

  .controller('TodoCtrl', function($scope, $timeout, Projects) {

    // comments
    $scope.createTask = function(task) {
      task.title = "New Task";
    };
  });

ngmin 後は、こうなる。

somefile.annotate.js
1
2
3
4
5
6
7
8
9
10
angular.module('app', []).controller('TodoCtrl', [
  '$scope',
  '$timeout',
  'Projects',
  function ($scope, $timeout, Projects) {
    $scope.createTask = function (task) {
      task.title = 'New Task';
    };
  }
]);

function の引数に記述している DI する services の名前が、自動的に文字列としても列挙されるので、これで minify 対策がラクになる!

その他、空行・コメント行削除、シングルクオート置換も実施される。

ngminGrunt タスク(grunt-ngmin)としても利用可能で自動化できる!

Life is too short to declare the names of dependencies!