如何在templateCache中修复模板路径？(吞咽-角度-模板疼痛)

Question

我使用吞咽角模板疼痛生成一个templateCache.js文件，该文件将我的所有HTML模板文件组合成1。(我的完整文件)

在将这个新模块注入我的应用程序之后，我的指令将自动获取模板，并且我不需要将部分.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.中修复这个问题。

我的格尔普文件的配置部分

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

^上面的操作是有效的，因为它使用根选项中的吞咽角模板疼痛在模板路径前面追加一个新的字符串。

问题是上面的代码只返回一次，并更新路径数组中的第一个项的所有路径，即beta/。

您将如何编写它，以便正确地替换每个文件的路径？

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

Answer 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文件的完整路径中删除基字符串。Base也可以是传递文件对象的函数，在更复杂的情况下可能会有所帮助。它都在index.js的第60行附近，在吞咽角模板中

Answer 3

您还可以使用这个吞咽插件，它可以读取路由、指令，并将templateUrl替换为templateUrl中引用的模板。

这将消除应用程序中处理templateUrl的所有麻烦。这使用相对url指令js文件，而不是绝对url。

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

你好-world-directive.js：

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

你好-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'));
});

吞咽角嵌入模板将生成以下文件：

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