将所有angular个模板编译成一个js文件

Question

我正在尝试将所有 angulara 模板编译成单个 js 文件。类似于 ember 对 ember-cli 所做的事情。

所以我成功地缩小并合并了所有 javascript 文件。我现在只有 2 个文件 vendor.js 和 application.js 以及我想塞入 templates.js 的大量模板文件。

我该怎么做？如果有人可以逐步解释，请。任何 links 也将不胜感激。令人惊讶的是，在任何地方都没有关于此的信息。

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

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 文件，没有任何错误。但是当我 link 它时， angular 吐出一堆错误。

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

构建工具虽然可取，但在这里并不重要。如果有人可以展示如何在没有构建工具的情况下手动完成，我会弄清楚剩下的。

谢谢。

Answer 1

我正在使用 Gulp 作为我的构建工具，其中有一个插件 gulp-angular-templatecache which pre-compiles and registers all templates for your module in the angular $templateCache - no changes are required to any of the calling code to use these. EDIT: The Angular documentation for $templateCache 解释了 templateCache 的工作原理。

可能值得阅读 gulp-angular-templatecache 的文档，看看它是如何预填充 $templateCache 的，看看你是否可以抄袭一些适合你的构建的东西过程。

这是我的 gulp 任务：

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/'));
});

将所有angular个模板编译成一个js文件

Compile all angular templates to one js file

angularjs

mimosa