Как исправить пути шаблона в templateCache? (Проглатывать-угловую-templatecache)

Question

Я использую gulp-angular-templatecache для создания файла templateCache.js, который сочетает в себе все мои файлы шаблонов HTML в 1. (my full 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 option в gulp-angular-templatecache, чтобы добавить новую строку перед шаблонами.

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

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

Answer 1

Понял это! Я не должен был, используя точные имена папок, но комков ** в моей конфигурации

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"... 

Answer 2

I столкнулись с подобной проблемой, но в моем случае невозможно было использовать один и тот же каталог для всех записей 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 index.js в gulp-angular-templatecache

Answer 3

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

Это устранит всю головную боль касательно обращения с шаблоном url в вашем приложении. Это использует относительный 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.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     template:'<strong>Hello world!</strong>' 
    }; 
});