javascript 如何修复templateCache中的模板路径？(gulp-angular-templatecache)

How to fix template paths in templateCache? (gulp-angular-templatecache)

提问by Leon Gaban

I'm using gulp-angular-templatecacheto generate a templateCache.js file which combines all my HTML template files into 1. (my full gulpfile)

我正在使用gulp-angular-templatecache生成一个 templateCache.js 文件，该文件将我所有的 HTML 模板文件合并为 1。（我的完整 gulpfile）

After injecting that new module into my app, my Directives will automatically pick up the templates and I won't need to add the partial .html files into my build folder.

将新模块注入我的应用程序后，我的指令将自动选取模板，我不需要将部分 .html 文件添加到我的构建文件夹中。

The problem is that the leading folder path is getting cut off, see my example below:

问题是前导文件夹路径被切断，请参见下面的示例：

The paths in my Directives:

我的指令中的路径：

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

The paths in my produced templateCache file:

我生成的 templateCache 文件中的路径：

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

^ panelsand headerare getting lost.

^panels并且header迷路了。

---

---

I'm trying to write a function that will fix that in my Gulpfile.

我正在尝试编写一个函数来解决我的 Gulpfile 中的问题。

The config section of my 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/'
};

My html-templatesgulp.task

我的html-templatesgulp.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];
    }
}

^ The above is working, in that it uses the root optionin gulp-angular-templatecacheto append a new string in front of the template paths.

^ 以上是有效的，因为它使用gulp-angular-templatecache 中的root 选项在模板路径前面附加一个新字符串。

Problem is my code above returns once and updates all the paths to the first item in the paths Array which is beta/.

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

How would you write this so that it correctly replaces the path for each file?

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

采纳答案by Leon Gaban

Figured it out! I should not have been using exact folder names, but globs **in my config

弄清楚了！我不应该使用确切的文件夹名称，而是**在我的配置中使用 globs

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

The updated gulp.task:

更新后的 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));
});

Now the output is correct:

现在输出是正确的：

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

回答by phazei

I ran into a similar issue, but in my case, it wasn't possible to use the same directory for all the gulp.src entries.

我遇到了类似的问题，但就我而言，不可能对所有 gulp.src 条目使用相同的目录。

There is a solution that will work all those folders

有一个解决方案可以处理所有这些文件夹

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

That presumes the gulpfile is one directory up from the public directory. It will remove the base string from the full path of the files from src. Base can also be a function that will be passed the file object which could be helpful in more complicated situations. It's all around line 60 of the index.js in gulp-angular-templatecache

这假设 gulpfile 是公共目录的一个目录。它将从 src 文件的完整路径中删除基本字符串。Base 也可以是一个将传递文件对象的函数，这在更复杂的情况下可能会有所帮助。全部在 gulp-angular-templatecache 中 index.js 的第 60 行

回答by ankur kushwaha

You can also use this gulp pluginwhich can read your routes, directives and replace the templateUrl with the template referenced in the templateUrl.

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

This will remove all headache regarding handling templateUrl in your application. This uses relative url to directive js files instead of absolute url.

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

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

hello-world-directive.js:

hello-world-directive.js：

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

hello-world-template.html:

hello-world-template.html:

<strong>
    Hello world!
</strong>

gulpfile.js:

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 will generate the following file:

gulp-angular-embed-templates 将生成以下文件：

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