2

我正在尝试将所有 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 文件而没有任何错误。但是当我链接它时，角度会吐出一堆错误。

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

构建工具在这里并不重要，尽管是可取的。如果有人可以展示如何在没有构建工具的情况下手动完成它，我会弄清楚其余的。

谢谢。

4

1 回答 1

5

我使用 Gulp 作为我的构建工具，其中有一个插件gulp-angular-templatecache可以在 angular $templateCache 中为您的模块预编译和注册所有模板 - 任何调用代码都不需要更改使用这些。编辑：$templateCache 的 Angular 文档解释了 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/'));
});
于 2015-06-08T16:43:13.067 回答