web-dev-qa-db-ja.com

templateCacheのテンプレートパスを修正する方法（gulp-angular-templatecache）

gulp-angular-templatecache を使用して、すべてのHTMLテンプレートファイルを1に結合するtemplateCache.jsファイルを生成しています（ 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は失われつつあります。

enter image description here

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

^上記は機能しており、テンプレートパスの前に新しい文字列を追加するために gulp-angular-templatecache で rootオプション を使用しています。

問題は、上記のコードが一度返って、beta/であるパス配列の最初の項目へのすべてのパスを更新することです。

各ファイルのパスを正しく置き換えるように、これをどのように記述しますか？

javascriptangularjsgulpangular-templatecache
19
Leon Gaban

理解した！私は正確なフォルダ名を使用するべきではありませんでしたが、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"...
15
Leon Gaban

私は同様の問題に遭遇しましたが、私の場合、すべての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がpublicディレクトリから1つ上のディレクトリであることを前提としています。 srcからファイルの完全パスから基本文字列を削除します。 Baseは、より複雑な状況で役立つファイルオブジェクトを渡す関数にすることもできます。それはすべてgulp-angular-templatecacheのindex.jsの60行目前後です。

4
phazei

this gulp plugin を使用して、ルート、ディレクティブを読み取り、templateUrlをtemplateUrlで参照されるテンプレートに置き換えることもできます。

これにより、アプリケーションでのtemplateUrlの処理に関する問題がすべて解消されます。これは、絶対URLではなく、相対jsファイルへのjsファイルを使用します。

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

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：

<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>'
    };
});
1
ankur kushwaha