Comment corriger les chemins de template dans templateCache? (goup-angular-templatecache)

j'utilise gulp-angulaire-templatecache pour générer un templateCache.le fichier JS qui combine tous mes fichiers de template HTML en 1. (mon gulpfile)

après avoir injecté ce nouveau module dans mon application, Mes Directives récupéreront automatiquement les modèles et je n'aurai pas besoin d'ajouter le partiel .fichiers html dans mon dossier de construction.

le problème est que le chemin du dossier principal est coupé, voir mon exemple ci-dessous:

les chemins dans mes Directives:

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

Les chemins de mon produit templateCache fichier:

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

^ panels et header se perdent.

enter image description here

j'essaie d'écrire une fonction qui corrigera ça dans mon Gulffile.

La section de configuration de mon 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/'
};

Mon html-templates Gulp.la tâche

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

^ ce qui précède fonctionne, en ce qu'il utilise le option rootgulp-angulaire-templatecache pour ajouter une nouvelle chaîne devant les chemins de template.

le problème est que mon code ci-dessus retourne une fois et met à jour tous les chemins vers le premier élément du tableau paths qui est beta/.

comment écririez-vous ceci pour qu'il remplace correctement le chemin pour chaque fichier?

18
demandé sur Leon Gaban 2015-07-16 18:29:05

3 réponses

Compris! Je n'aurais pas dû utiliser les noms exacts des dossiers, mais globs ** dans ma configuration

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

La mise à jour de gulp.tâche:

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

Maintenant, la sortie est correcte:

$templateCache.put("beta/beta.html"...
$templateCache.put("header/control_header/controlHeader.html"...
$templateCache.put("panels/tags/tagsPanel.html"...
14
répondu Leon Gaban 2017-05-17 18:23:32

j'ai rencontré un problème similaire, mais dans mon cas, il n'était pas possible d'utiliser le même répertoire pour tous les gulp.entrées src.

Il y a une solution qui fera fonctionner tous ces dossiers

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

cela suppose que le fichier gulpfile est un répertoire en haut du répertoire public. Il supprimera la chaîne de base du chemin complet des fichiers de src. La Base peut aussi être une fonction qui passera l'objet file qui pourrait être utile dans des situations plus compliquées. C'est tout autour de la ligne 60 de l'index.js dans gulp-angulaire-templatecache

4
répondu phazei 2016-04-08 18:03:50

vous pouvez aussi utiliser ce plugin gulfp qui peut lire vos routes, directives et remplacer le templateUrl avec le modèle référencé dans le templateUrl.

ceci supprimera tous les maux de tête concernant la manipulation de templateUrl dans votre application. Cela utilise l'url relative aux fichiers de la directive js au lieu de l'absolu URL.

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

hello-world-directive.js:

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

hello-world-modèle.html:

<strong>
    Hello world!
</strong>

gulffile.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-angulaire-incorporez-les modèles de générer le fichier suivant:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});
1
répondu ankur kushwaha 2016-10-07 19:38:20