2016-04-06 2 views
1

私はnunjucks-renderをフロントエンドJavaScriptテンプレートエンジンとして使用しています。gulp-gray-matterプラグインで作成されたデータオブジェクトにアクセスするにはどうすればいいですか(ノンジャックでhtmlファイルをコンパイルする場合)

特定の.nunjuckファイルから正面物質データを読み込み、そのデータを使用して自分の.nunjuck(テンプレート)ファイルを.htmlファイルにコンパイルします。

私はgulp-gray-matterがより速くより良い正面物質抽出プラグインの1つであることを発見しました。

私の質問は、どのようにして正面物質データオブジェクトにアクセスできるようになりましたか?最終的なHTML出力があるべき

--- 
title: Welcome to ACME Co. 
--- 

<title>{{ data.title }}</title> 

::次のように

<title>Welcome to ACME Co.</title> 

マイgulfile.js設定は次のとおりです。

例えば、私はとして.nunjucksファイル内の前頭問題を記述します

var gulp = require('gulp'), 
    nunjucks = require('gulp-nunjucks-render') 
    gulpGrayMatter = require('gulp-gray-matter'); 

    gulp.task("nunjucks", function(){ 
     return gulp.src(src/templates/**/*.+(nunjucks|njk)) 
      .pipe(gulpGrayMatter()) //send files through gray-matter plugin to extract frontal-matter 
      .pipe(nunjucks({ 
       path: src/templates 
      })) 
      .pipe(gulp.dest(src)); 
    }); 

答えて

2

デフォルトでは、gulp-gray-matterはすべてのフロントマターデータをに保存しますストリーム内の各ファイルのプロパティ。

また、デフォルトではgulp-nunjucks-renderは、ストリーム内の各ファイルのdataプロパティに存在するデータを使用します。

実際にはGulpfileで何もする必要はありません。

gulp.task('nunjucks', function(){ 
    return gulp.src('src/templates/**/*.nunjucks') 
     .pipe(gulpGrayMatter()) 
     .pipe(nunjucks()) 
     .pipe(gulp.dest('dest')); 
}); 

あなたは正しくしかし、あなたの.nunjuckテンプレート内のデータにアクセスする必要があります:これは動作します

--- 
title: Welcome to ACME Co. 
--- 

<title>{{ title }}</title> 
+0

このような単純な答えを...そして4時間後に私は私の生活に移動することができます。ありがとう:) –

関連する問題