在 Angular 项目中使用 gulp 处理 html 部分答案

【问题标题】：Processing html partials using gulp in Angular project在 Angular 项目中使用 gulp 处理 html 部分
【发布时间】：2014-12-06 14:36:27
【问题描述】：

-client/
     index.html
     node_modules/
       ..
       ..
     js/
       -controllers/   
       -directives/
       -services/
         app.js
     partials/
         someHTML.html
         anotherHTML.html
     build/
        -app.js
        -custom.css
        ...

-server
   server.js

Angular 指令、控制器等使用的所有部分 html 模板都位于 build 文件夹中。我使用 gulp 构建项目，它执行所有常见任务，例如清理目标文件夹、编译手写笔并将其放置在构建文件夹中、将 bootstrap.css 移动到构建文件夹、浏览化 .js 文件和 mvoe 到构建文件夹。到目前为止一切顺利.. 但是如何处理部分文件夹中的 html 模板？

这些只是被复制到构建文件夹吗？

根据@JimL 的建议.. 我目前正在使用 browserify，我的主要 app.js 看起来像这样

/*jshint globalstrict: true*/
'use strict';

require('es5-shim');
require('es5-sham');
require('jquery');
require('angular');

var app = angular.module('app', [require('angular-ui-router')]);

require('./controllers');
require('./directives');
require('./services');

现在，模板缓存如何适应上述等式？ template.js 文件被创建并放置在 build 文件夹中..这对于 browserify 尚不可用。

【问题讨论】：

我建议你使用template cache将所有html文件合并成一个js文件。更容易加载（甚至可以包含在您的 app.min.js 文件中），并且对于只获得 1 个模板请求而不是每个部分一个模板请求的用户来说非常好:)
现在我的指令/控制器使用诸如 '../partials/someTemplate.html' 之类的路径......一旦我包含模板缓存，这将如何改变？
除了“文件夹向上”它不会改变 :) 您以相同的方式引用缓存文件
@JimL 我在上面编辑了我的问题。我能够包含模板缓存并编译并获取 template.js.. 不知道如何将其包含在项目中。
在 gulp 任务中将选项 Standalone:true 传递给 templateCache。在您的应用程序之前包含模板 js 文件，然后注入模板模块（如 ui-router）

标签： angularjs gulp

【解决方案1】：

您应该尝试使用 Gulp Angular Templatecache 之类的工具，它会使用 $templateCache 服务将模板直接捆绑到您的应用程序中。

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

gulp.task('html', function () {
    gulp.src('templates/**/*.html')
        .pipe(templateCache())
        .pipe(gulp.dest('public'));
});

https://www.npmjs.com/package/gulp-angular-templatecache

【讨论】：