元記事: 【AngularJS】テンプレート（.html）を1ファイルにまとめたい！

gulp-angular-templatecache

~~grunt~~ gulpでJSやCSSをビルドするとき，

ひとつにまとめて（concat, browserify）
ちっちゃくして（uglify，cssmin, htmlmin）

少しでもページの読み込みを軽くしようとします，が…．
AngularJSでDirectiveやng-includeする用のテンプレートファイル（.htmlファイル）はどうしたらいいの？( ﾟдﾟ)

「jsファイルにHTMLをつらつら書いていくのはﾁｮｯﾄ…」
「かと言ってバラバラのままだとリクエストが増えて重くなる…」

そんな時に便利なのがgulp-angular-templatecacheです．

.
├── app
│   └── assets
│       ├── javascripts
│       └── templates
│           ├── hoge.html
│           └── fuga.html

みたいな大量のテンプレートファイルを

angular.module('myApp').run(["$templateCache", function($templateCache) {
  $templateCache.put("hoge.html",
    // hoge.htmlのなかみ
  );
  ...
  $templateCache.put("piyo.html",
    // piyo.htmlのなかみ
  );
}]);

のようにイイカンジのJSにまとめてくれます（これをふつうに読みこめばOK）

つかいかた

ふつうのつかいかた

gruntfile.babel.js

import templateCache from "gulp-angular-templatecache";
 
gulp.task("build:templates", () => {
  return gulp.src('app/templates/**/*.html')
    .pipe(templateCache({module: "myApp"}))
    .pipe(gulp.dest("dist"));
});

基本は上のような感じ．注意点は「templateCacheのmoduleオプションは自分のangularアプリのモジュール名にする」ことです．
app/javascripts/constants.jsに定義しておいてimportしてくると綺麗ですね．

export const appName = "myApp";

import {appName} from "./app/javascripts/constants";

minifyしたい！

何もせずともminify済みのが出てきます．

ファイルパスと`templateUrl`を別にしたい！

たとえば，app/assets/templates以下のHTMLファイルをtemplates/**.htmlというURLで扱いたい場合，下記のいずれかのオプションを追加すればOK.

prefix: "templates"
base: "app/assets"

ほかにもいろんなオプションがあるみたいですが，僕が使うのはコレぐらいです．

サクサク動くアプリを~~Grunt~~ Gulpでイイ感じに自動化しながらつくろう！
これでみんなもモテモテだ！！！！！ [要出典]

参考