Angularjs 将所有角度模板编译为一个js文件

我试图将所有angulara模板编译成一个js文件。 类似于ember对ember cli所做的操作

因此，我成功地缩小并压缩了所有javascript文件。 我现在只有2个文件vendor.js和application.js，还有很多模板文件，我想把它们塞进templates.js

我该怎么做呢？如果有人能一步一步地解释，请。任何链接都将不胜感激。 令人惊讶的是，任何地方都没有这方面的信息

我使用含羞草作为构建工具，在我看来这是最简单的。 这是我的含羞草配置：

exports.config = {
  modules: [
  "copy",
  "stylus",
  "minify-css",
  "minify-js",
  "combine",
  "htmlclean",
  "html-templates"
  ],
  watch: {
    sourceDir: "app",
    compiledDir: "public",
    javascriptDir: "js",
    exclude: [/[/\\](\.|~)[^/\\]+$/]
  },
  vendor: {
    javascripts: "vendor/js"
  },
  stylus: {
    sourceMap: false
  },
  combine: {
    folders: [
    {
      folder:"vendor/js",
      output:"vendor.js",
      order: [
      "angular.js"
      ]
    },
    {
      folder:"js",
      output:"main.js",
      order: [
      "application/main.js"
      ]
    }
    ]
  },
  htmlclean: {
    extensions:["html"]
  },
  htmlTemplates: {
    extensions: ["tpl"]
  },
  template: {
    outputFileName: "templates"
  }
}

它生成templates.js文件时没有任何错误。但当我连接它时，angular会吐出一堆错误

编译后，如何从ng include和路由提供程序调用这些模板？ 我假设这与我使用id调用脚本模板是一样的，在我的例子中，id是从模板原始文件名派生的，对吗？ 也许我错过了一些重要的步骤

构建工具在这里并不重要，尽管它是可取的。如果有人能够演示如何在没有构建工具的情况下手动完成这项工作，我会找出其余的方法

---

谢谢。

我使用Gulp作为我的构建工具，其中有一个插件，可以在angular$templateCache中预编译并注册模块的所有模板-无需更改任何调用代码即可使用这些模板编辑：说明templateCache如何工作

阅读gulp angular templatecache的文档可能值得一读，看看它是如何预填充$templatecache的，看看您是否可以复制一些可以与构建过程一起工作的东西

以下是我的吞咽任务：

var templateCache = require('gulp-angular-templatecache');

gulp.task('buildjstemplates', function () {
  return gulp.src(['public/javascripts/app/**/*.html'])
  .pipe(templateCache({module: 'app'}))
  .pipe(gulp.dest('public/javascripts/app/'));
});

---

非常感谢。我会检查这些文件。我可能会从中有所收获。我知道你说过不需要改变。但我不明白。如果将所有模板编译成一个文件，则不能像往常一样使用模板URL调用它。那么，如何从路由提供程序和ng include调用它们呢？Angular知道$templateCache，并在渲染时在内部使用它，因此它只需加载HTML的实际URL一次-该插件所做的只是生成一个.js文件，该文件用模板预填充$templateCache，以便与Angular的现有结构和确保Angular始终命中缓存并且从不需要“手动”加载模板。我刚刚在这个答案中添加了一个，这可能有助于解释@r.sendecky