【AngularJS】テンプレート（.html）を1ファイルにまとめたい！ - gulp ver.

元記事: 【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でイイ感じに自動化しながらつくろう！
これでみんなもモテモテだ！！！！！ [要出典]

参考

• gulp-angular-templatecache
• 【AngularJS】テンプレート（.html）を1ファイルにまとめたい！