Gulp 角度模板缓存根问题答案

【问题标题】：Gulp angular templatecache root issueGulp 角度模板缓存根问题
【发布时间】：2015-09-12 23:49:53
【问题描述】：

我是开发 AngularJS 应用程序的团队的一员，现在我正在修改 Gulp 构建脚本。我的部分任务是预填充模板缓存（到目前为止，我们一直在加载模板，因为路由/指令需要它们）。

Gulp 任务基本上是：

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

gulp.task('cache-templates', function(){
    var dest = destinationPath,
        src = sourcePath;

    return gulp.src(src)
        .pipe(plumber())
        .pipe(templateCache('templates.js', {root: './templates/'}))
        .pipe(gulp.dest(dest));
});

我遇到的问题是 gulp 从根目录中删除了“./”。例如：

$templateCache.put("templates/foo.html","<div>some html</div>");

代替

$templateCache.put("./templates/foo.html","<div>some html</div>");

该模块已正确加载到 app.js 并声明为依赖项，如果我手动将“./”作为前缀，则在构建后，一切正常。那么你能告诉我如何强制 Gulp 在我的根目录中包含“./”前缀吗？

注意：所有其他前缀都可以正常工作，它只是删除了“./”。如果我可以从 Gulpfile 中解决这个问题，我会更喜欢它，而不必修改我的指令和 $routeProvider 中的 templateUrl，因为应用程序相当大，而且只会自找麻烦。谢谢！ :)

【问题讨论】：

为什么需要前缀./？没有它你就不能到处工作吗？
./ 无论如何都是当前目录，那么拥有或不拥有它有什么区别？
因为模板缓存中的键字符串不再匹配没有 ./ 的模板 URL，所以 Angular 不会加载它们。此外，我正在寻找一种更简单/更优雅的解决方案，而不仅仅是进入我的应用程序中的每个文件并修改 tempalteUrl。

标签： angularjs gulp

【解决方案1】：

您可以做的是使用 gulp-replace 并将 'templates/' 替换为 './templates/'。

旧答案

在您传递给模板的选项中，您可以提供base 函数

   .pipe(templateCache('templates.js', {root: './templates/', base: baseFn}))

你可以在那里修改文件路径

        var baseFn = function (file) { return './' + file.relative; }

【讨论】：

你使用的是哪个 gulp 模块？
templateCache = require('gulp-angular-templatecache');
尝试删除 root 属性，您可以使用 baseFn './templates/' + file.relative 来添加它
我尝试了所有解决方案，但都不起作用..你最终可以做的是使用gulp-replace并将'templates/'替换为'./templates/'
做到了。谢谢！ :)