我应该如何在 AngularJS 项目中使用 Gulp 编译 html 模板答案

【问题标题】：How should I compile html templates with Gulp in AngularJS project我应该如何在 AngularJS 项目中使用 Gulp 编译 html 模板
【发布时间】：2016-08-15 07:56:26
【问题描述】：

我的 AngularJS 应用程序中有以下目录结构：

|-app
|--blog
|---BlogController.js
|---BlogService.js
|---BlogResource.js
|---states.js
|---templates
|----blog.html
|----blog-post.html
|----edit-blog-post.html
|--user
|---UserController.js
|---UserService.js
|---UserResource.js
|---states.js
|---templates
|----user-info.html
|----user-update.html
|-dist
|--js
|---all.js
|-templates
|--blog
|---blog.html
|---blog-post.html
|---edit-blog-post.html
|--user
|---user-info.html
|---user-update.html

app 文件夹用于开发，dist 文件夹用于生产。我使用 Gulp 来构建项目。 state.js 文件包含 ui.router 状态配置。以下是此文件的示例：

app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
    .state('blog-post', {
        url: '/blog-posts/:id',
        templateUrl: 'blog/templates/blog-post.html',
        controller: BlogPostController
    })
}]);

问题出在templateUrl 属性中。当我构建项目时，所有文件更改的实际位置和templateUrl 不指向 html 文件。所以templateUrl 属性必须在all.js 文件中更改。我怎样才能用 Gulp 做到这一点？

【问题讨论】：

标签： angularjs gulp angular-ui-router

【解决方案1】：

在我看来，最好的方法是使用 Angular 的template cache。有一个名为 gulp-angular-templatecache 的 gulp 插件可以帮助生成此输出。

例如，假设您的blog/templates/blog-post.html 的内容是：

<h2>{{ :: blog.title }}</h2>
<p>{{ :: blog.content }}</p>

你可以有一个像这样的 gulp 任务：

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var angularTemplateCache = require('gulp-angular-templatecache');

gulp.task('templates', function() {
    return gulp.src('app/**/*.html')
        .pipe(htmlmin())
        .pipe(angularTemplateCache('templates.js', {
            module: 'YOUR_ANGULAR_APP_NAME',
            root: ''
        }))
        .pipe(gulp.dest('dist'));
});

这将创建一个包含以下内容的文件dist/js/templates.js：

angular.module('YOUR_ANGULAR_APP_NAME').run(['$templateCache', function($templateCache) {$templateCache.put('blog/templates/blog-post.html','<h2>{{ :: blog.title }}</h2>\n<p>{{ :: blog.content }}</p>');}]);

您来自app/ 的所有模板都将结束该文件，任何对templateUrl 的调用都将能够找到正确的模板。

此解决方案解决了您的templateUrl 链接损坏的问题，并且还减少了客户端浏览器必须发出的请求数量。您还可以更进一步，将 templates.js 与您的 dist/js/all.js 组合在一起，这样就只有一个 JavaScript 文件。

【讨论】：