Question

我正在通过gulp缩小角项目。这个项目包含index.html，css，libraries，app.js（包含路由层+控制器的Angular模块）和视图。

我可以轻松地将所有js文件，库和css文件连接到一个捆绑文件中.HTML文件也很容易缩小，但问题是我在我的app.js中有路由，它渲染了templateUrl

.state('dashboard.home', {
                url: '/home',
                templateUrl: 'app/views/dashboard/home.html'
            })

现在，由于这个路由我不能缩小+将所有html文件连接成一个。因为每个路由呈现一个带有文件名的视图，而只有一个名为bundle.html的文件。

在这里，我需要一个关于如何处理这种情况的指南。

谢谢你的问候

Answer 1

我使用gulp-ng-template：

gulpfile.js：

var ngTemplate = require('gulp-ng-template');

....

gulp.task('templates', function () {
  return gulp.src(['view1.html', 'view2.html'])
  .pipe(ngTemplate({filePath: 'js/tpl.js'}))
  .pipe(gulp.dest('test'));
});

ngTemplate将您的观点组合在一起，并将它们放入单个文件js/tpl.js中，如下所示：

 angular.module('ngTemplates').run(['$templateCache', function($templateCache) {
   $templateCache.put('view1.html', '<div class="test">A</div>\n');
   $templateCache.put('view2.html', '<div class="test">\n <span>B</span>\n</div>\n');
 }]);

现在您只需将此文件包含在index.html中即可。您的视图将在角度编译器的原始路径中可用。您不需要将原始的html观看次数包含在项目中。

您可以手动或使用ng-html-replace将此文件js/tpl.js添加到index.html。

Answer 2

您应该使用mane maneObj = new mane("string");角度提供程序，并将所有html模板转换为$templateCache代码，而不是将所有模板连接到一个html文件中。通过使用JavaScript，您可以将所有teplates放入一个文件中，它将与路由机制完美配合。试试这个gulp模块Gulp ng templates

缩小包含路由的js文件

2 个答案: