Как исправить пути шаблонов в templateCache? (gulp - angular -templatecache)

Я использую gulp-angular-templatecache для создания файла templateCache.js, который объединяет все мои файлы шаблонов HTML в 1. (мой полный файл gulpfile)

После ввода этого нового модуля в мое приложение мои директивы автоматически подберут шаблоны, и мне не нужно будет добавлять частичные .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-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];
    }
}

^ Вышеупомянутое работает, поскольку оно использует параметр root в gulp-angular-templatecache для добавления новая строка перед шаблонами.

Проблема заключается в том, что мой код выше возвращает один раз и обновляет все пути к первому элементу в массиве путей, который равен beta/.

Как вы могли бы написать это так, чтобы он правильно заменил путь для каждого файла?

Ответ 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"...

Ответ 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. Базой также может быть функция, которая будет передаваться файлом, который может быть полезен в более сложных ситуациях. Все это вокруг строки 60 индекса .js в gulp - angular -templatecache

Ответ 3

Вы также можете использовать этот gulp плагин, который может читать ваши маршруты, директивы и заменять templateUrl шаблоном, на который ссылается шаблон templateUrl.

Это устранит всю головную боль, связанную с обработкой templateUrl в вашем приложении. Это использует относительный url для директивы js файлов вместо абсолютного URL-адреса.

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

привет-мир-directive.js:

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

привет-мир-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 создаст следующий файл:

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