将所有角模板编译到一个js文件中。

Question

我试图把所有的angulara模板编译成一个js文件。类似于余烬做的余烬。

因此，我成功地缩小并连接了所有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文件，没有任何错误。但是当我把它连接起来的时候，角吐出了一堆错误。

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

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

谢谢。

Answer 1

我使用Gulp作为我的构建工具，其中有一个插件吞咽角模板疼痛，它预先编译并注册了角度$templateCache中模块的所有模板--不需要对调用代码进行任何更改就可以使用这些模板。编辑：$templateCache的角度文档解释了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/'));
});