Question

我正在尝试将所有angulara模板编译成单个js文件。像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是从模板原始文件名派生的，对吧？也许我错过了一些重要的步骤。

尽管需要，构建工具在这里并不重要。如果有人可以在没有构建工具的情况下手动显示如何进行，我会想出其余部分。

感谢。

Answer 1

我正在使用Gulp作为我的构建工具，并且在那里，有一个插件gulp-angular-templatecache，它预先编译并在angular $ templateCache中注册模块的所有模板 - 不需要任何更改调用代码来使用这些。编辑：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/'));
});

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

1 个答案: