如何在templateCache中修复模板路径？(吞掉-角templatecache)

Question

我正在使用gulp-angular-templatecache生成templateCache.js文件,该文件将我的所有HTML模板文件合并为1.(我的完整gulp文件)

将新模块注入我的应用程序后,我的指令将自动获取模板,我不需要将部分.html文件添加到我的构建文件夹中.

问题是前导文件夹路径被切断,请参阅下面的示例:

我的指令中的路径:

templateUrl : "panels/tags/tagsPanel.html"...
templateUrl : "header/platform_header/platformHeader.html"...

我生成的templateCache文件中的路径:

$templateCache.put("tags/tagsPanel.html"...
$templateCache.put("platform_header/platformHeader.html"...

^ panels并且header迷路了.

---

我正在尝试编写一个能在我的Gulpfile中修复它的函数.

我的Gulpfile的配置部分:

var config = {
    srcPartials:[
        'app/beta/*.html', 
        'app/header/**/*.html',
        'app/help/*.html',
        'app/login/*.html',
        'app/notificaitons/*.html',
        'app/panels/**/*.html',
        'app/popovers/**/*.html',
        'app/popovers/*.html',
        'app/user/*.html',
        'app/dashboard.html'
    ],
    srcPaths:[
        'beta/', 
        'header/',
        'help/',
        'login/',
        'notificaitons/',
        'panels/',
        'popovers/',
        'popovers/',
        'user/',
        'dashboard.html'
    ],
    destPartials: 'app/templates/'
};

我的html-templatesgulp.task

gulp.task('html-templates', function() {
    return gulp.src(config.srcPartials)
    .pipe(templateCache('templateCache.js', {
        root: updateRoot(config.srcPaths)
    },
    { module:'templateCache', standalone:true })
    ).pipe(gulp.dest(config.destPartials));
});

function updateRoot(paths) {
    for (var i = 0; i < paths.length; i++) {
        // console.log(paths);
        console.log(paths[i]);
        return paths[i];
    }
}

^以上是有效的,因为它使用gulp-angular-templatecache中的root选项在模板路径前面附加一个新字符串.

问题是上面的代码返回一次,并更新路径数组中第一项的所有路径beta/.

你会如何写这个,以便它正确地替换每个文件的路径？

Answer 1

弄清楚了!我不应该使用确切的文件夹名称,但**在我的配置中使用globs

var config = {
    srcTemplates:[
        'app/**/*.html',            
        'app/dashboard.html',
        '!app/index.html'
    ],
    destPartials: 'app/templates/'
};

更新的gulp.task:

gulp.task('html-templates', function() {
    return gulp.src(config.srcTemplates)
    .pipe(templateCache('templateCache.js', { module:'templateCache', standalone:true })
    ).pipe(gulp.dest(config.destPartials));
});

现在输出是正确的:

$templateCache.put("beta/beta.html"...
$templateCache.put("header/control_header/controlHeader.html"...
$templateCache.put("panels/tags/tagsPanel.html"...

Answer 2

我遇到了类似的问题，但就我而言，不可能对所有 gulp.src 条目使用相同的目录。

有一个解决方案可以处理所有这些文件夹

return gulp.src(['public/assets/app1/**/*.tpl.html', 'public/assets/common_app/**/*.tpl.html'])
    .pipe(templateCache({
        root: "/",
        base: __dirname + "/public",
        module: "App",
        filename: "templates.js"
    }))
    .pipe(gulp.dest('public/assets/templates'))

这假定 gulpfile 是公共目录的一个目录。它将从 src 文件的完整路径中删除基本字符串。Base 也可以是一个将传递文件对象的函数，这在更复杂的情况下可能会有所帮助。全部在 gulp-angular-templatecache 中 index.js 的第 60 行