How to fix template paths in templateCache? (gulp-angular-templatecache)

Question

I'm using gulp-angular-templatecache to generate a templateCache.js file which combines all my HTML template files into 1. (my full gulpfile)

After injecting that new module into my app, my Directives will automatically pick up the templates and I won't need to add the partial .html files into my build folder.

The problem is that the leading folder path is getting cut off, see my example below:

The paths in my Directives:

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

The paths in my produced templateCache file:

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

^ panels and header are getting lost.

---

I'm trying to write a function that will fix that in my Gulpfile.

The config section of my 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/'
};

My html-templates gulp.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];
    }
}

^ The above is working, in that it uses the root option in gulp-angular-templatecache to append a new string in front of the template paths.

Problem is my code above returns once and updates all the paths to the first item in the paths Array which is beta/.

How would you write this so that it correctly replaces the path for each file?

Answer 1

Figured it out! I should not have been using exact folder names, but globs ** in my config

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

The updated 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));
});

Now the output is correct:

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