Wie man Vorlagenpfade in templateCache repariert? (Schlucke-Winkel templatecache)

Question

I gulp-angular-templatecache bin mit einem templateCache.js Datei zu erzeugen, die meine HTML alle Template-Dateien in 1. (my full gulpfile)

Nach der Injektion das neue Modul in meine App kombiniert, wird meine Richtlinien automatisch die Vorlagen abholen und ich muss nicht die partiellen HTML-Dateien in meinem Build-Ordner hinzufügen.

Das Problem ist, dass der führende Ordnerpfad abgeschnitten wird immer, mein Beispiel unten sehen:

Die Wege in meinen Richtlinien:

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

Die Wege in meiner produzierte templateCache Datei:

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

^panels und header gehen verloren.

---

Ich versuche, eine Funktion zu schreiben, die in meinem Gulpfile beheben.

Der Config-Abschnitt meines 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/' 
}; 

Mein 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]; 
    } 
} 

^Die oben arbeitet, indem sie die root option in gulp-angular-templatecache verwendet eine neue Zeichenfolge anhängen vor den Vorlagenpfaden.

Problem ist mein Code oben kehrt einmal zurück und aktualisiert alle Pfade zum ersten Element in den Pfaden Array, die beta/ ist.

Wie würden Sie dies schreiben, so dass es den Pfad für jede Datei korrekt ersetzt?

Answer 1

Ich habe es herausgefunden! Ich sollte nicht gewesen genaue Ordnernamen verwenden, aber Klackse ** in meine Config

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

Die aktualisierte 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)); 
}); 

Nun ist die Ausgabe korrekt ist:

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

Answer 2

I lief in ein ähnliches Problem, aber in meinem Fall war es nicht möglich, das gleiche Verzeichnis für alle gulp.src Einträge zu verwenden.

Es gibt eine Lösung, die alle diese Ordner

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')) 

dass die gulpfile arbeiten geht davon aus ist ein Verzeichnis nach oben aus dem öffentlichen Verzeichnis. Es wird die Basiszeichenfolge aus dem vollständigen Pfad der Dateien von src entfernen. Base kann auch eine Funktion sein, an die das Dateiobjekt übergeben wird, was in komplizierteren Situationen hilfreich sein kann. Es ist alles um Zeile 60 der index.js in gulp-angular-templatecache

Answer 3

Sie können auch this gulp plugin verwenden, die Ihre Routen, Direktiven lesen und die VorlageUrl durch die Vorlage ersetzen kann, auf die in der VorlageUrl verwiesen wird.

Dies wird alle Kopfschmerzen in Bezug auf die Handhabung von templateUrl in Ihrer Anwendung beseitigen. Dies verwendet relative URL zu Direktiven-js-Dateien anstelle der absoluten URL.

src 
+-hello-world 
    |-hello-world-directive.js 
    +-hello-world-template.html 

Hallo-Welt-directive.js:

angular.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     // relative path to template 
     templateUrl: 'hello-world-template.html' 
    }; 
}); 

Hallo-Welt-template.html:

<strong> 
    Hello world! 
</strong> 

gulpfile.js:

var gulp = require('gulp'); 
var embedTemplates = require('gulp-angular-embed-templates'); 

gulp.task('js:build', function() { 
    gulp.src('src/scripts/**/*.js') 
     .pipe(embedTemplates()) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp- Angular-Embed-Templates erzeugen die folgende Datei:

angular.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     template:'<strong>Hello world!</strong>' 
    }; 
});