javascript - ¿Cómo arreglar rutas de plantilla en templateCache?(gulp-angular-templatecache)

angularjs

Question

Estoy usando gulp-angular-templatecache para generar un archivo templateCache.js que combina todos mis archivos de plantillas HTML en 1. ( mi gulpfile completo )

Después de inyectar ese nuevo módulo en mi aplicación, mis Directivas recogerán automáticamente las plantillas y no necesitaré agregar los archivos .html parciales a mi carpeta de compilación.

El problema es que la ruta de la carpeta principal se está cortando, vea mi ejemplo a continuación:

Los caminos en mis directivas:

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

Las rutas en mi archivo templateCache producido:

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

^ panels y header están perdiendo.

Estoy tratando de escribir una función que solucione eso en mi Gulpfile.

La sección de configuración de mi 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/''
};

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

^ Lo anterior está funcionando, ya que usa la opción raíz en gulp-angular-templatecache para agregar una nueva cadena delante de las rutas de la plantilla.

El problema es que mi código anterior vuelve una vez y actualiza todas las rutas al primer elemento en la matriz de rutas que es beta/ .

¿Cómo escribirías esto para que reemplace correctamente la ruta para cada archivo?

Answer 1

¡Lo averigué! No debería haber estado usando nombres de carpeta exactos, pero globs ** en mi configuración

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

El gulp.task actualizado:

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

Ahora la salida es correcta:

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

Answer 2

Me encontré con un problema similar, pero en mi caso, no fue posible usar el mismo directorio para todas las entradas de gulp.src.

Hay una solución que funcionará todas esas carpetas.

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

Eso supone que el gulpfile es un directorio del directorio público. Se eliminará la cadena base de la ruta completa de los archivos de src. Base también puede ser una función a la que se pasará el objeto de archivo, lo que podría ser útil en situaciones más complicadas. Está alrededor de la línea 60 del index.js en gulp-angular-templatecache

Answer 3

También puede utilizar este complemento truculento que puede leer sus rutas, directivas y reemplazar el templateUrl con la plantilla referenciada en el templateUrl.

Esto eliminará todos los dolores de cabeza relacionados con el manejo de templateUrl en su aplicación. Esto usa la url relativa para dirigir archivos js en lugar de la url absoluta.

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

hola-mundo-directiva.js:

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

hello-world-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 generará el siguiente archivo:

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