Yeoman Angular Generatorでgrunt buildするとtemplatesフォルダがdistに行かない件

自前でdirectiveなんかを作って、テンプレートHTMLのファイルをtempleteURLを指定したがよいものの、いざgrunt buildをしてみると、テンプレートを保存したフォルダtemplatesがdistに流れていかない!という現象にぶつかったので。

色々方法はあるんでしょうが、一つの方法は grunt-angular-templates をつかう方法です。今回これをやってみました。(ちなみにこのサイトに大変お世話になりました。記事はもう1年前のもの。先取りすごい!grunt-angular-templatesを使ってみたygoto3's caught up)

ようはテンプレートHTMLをJavascriptの一部にして、結合してしまおうというアイディアですね。grunt buildの際にひとまとめにされるjavascriptのなかに入れちゃえば、ファイルをわざわざコピーしなくてもいいじゃん、てことかな。

具体的には、templateCacheで準備させて、呼び出しの際はキャッシュにある内容が読み込まれるようにしておくというカラクリみたいです。

もちろんインストールは

$ npm install grunt-angular-templates --save-dev

そして、Gruntfile.jsに

grunt.loadNpmTasks('grunt-angular-templates');

を追加します。ぼくは grunt.initConfig がおわったすぐ後あたりに書きました。

そしてタスクの内容を設定しますが、それは grunt.initConfig内の最後の方にこんな感じで書きました。

ngtemplates:  {
      app: {
        cwd:      'app', 
        src:      'templates/**.html',
        dest:     'app/scripts/app.templates.js',
        options: {
          module: '<%= yeoman.appname %>',
            htmlmin: {
              collapseBooleanAttributes:      true,
              collapseWhitespace:             true,
              removeAttributeQuotes:          true,
              removeComments:                 true,
              removeEmptyAttributes:          true,
              removeRedundantAttributes:      true,
              removeScriptTypeAttributes:     true,
              removeStyleLinkTypeAttributes:  true
            }
        }
      }

それぞれ何がどの設定なのかは公式ページの説明を見ていただきたいのですが、「srcに指定されたテンプレートHTMLたちを、destに指定されたjsファイルに格納して、その際にはhtmlminで圧縮してね。その際にangular.module(ほにゃらら)にはmoduleで指定した名前をいれておいてね」といった具合です。Yeoman Angular GeneratorではGruntfile.jsと同じ階層にappフォルダあるので、作業はそのフォルダでやってもらうためにcwdも指定しています。

こうすればdistをサーバーにアップしてもテンプレートはきちんと読めてるし、しかもXHRも抑えられる。一挙両得ですな。