2016-04-08 21 views
2

値下げJSON経由ヒスイとhtmlファイルを生成しますjadeコンパイラへの他の変数と一緒に。一気私は<code>gulp-markdown-to-json</code>と私の目的は、このようになります値下げファイルからデータを取得している<code>gulp-jade</code></p> <p>を使用してい

は、これまでのところ、私はしましたこの:私はヒスイのコンパイラを実行する前にgulp.srcに供給値下げからJSONを読み込むステップと、ヒスイのテンプレートファイル名が欠落してい

gulp.task('docs', function() { 
    return gulp 
    .src('./src/docs/pages/*.md') 
    .pipe(md({ 
     pedantic: true, 
     smartypants: true 
    })) 

    .pipe(jade({ 
     jade: jade, 
     pretty: true 
    })) 
    .pipe(gulp.dest('./dist/docs')); 
}); 

答えて

5

は、ご使用のケースで誤ったgulpプラグインです。

  • あなたがデータでいっぱいにしたいテンプレートの流れを持っている場合は、gulp-jadeを使用します。

    gulp.src('*.jade') 
        .pipe(...) 
        .pipe(jade({title:'Some title', text:'Some text'})) 
    
  • あなたはテンプレートでレンダリングするデータのストリームを持っている場合は、gulp-wrapを使用:

    gulp.src('*.md') 
        .pipe(...) 
        .pipe(wrap({src:'path/to/my/template.jade'}) 
    

あなたの場合は、以来、もう少し難しいです.mdファイルごとに異なる.jadeテンプレートが必要です。幸いにもgulp-wrapは、ストリーム内の各ファイルに対して別のテンプレートを返すことができる機能を受け入れ:

var gulp = require('gulp'); 
var md = require('gulp-markdown-to-json'); 
var jade = require('jade'); 
var wrap = require('gulp-wrap'); 
var plumber = require('gulp-plumber'); 
var rename = require('gulp-rename'); 
var fs = require('fs'); 

gulp.task('docs', function() { 
    return gulp.src('./src/docs/pages/*.md') 
    .pipe(plumber()) // this just ensures that errors are logged 
    .pipe(md({ pedantic: true, smartypants: true })) 
    .pipe(wrap(function(data) { 
     // read correct jade template from disk 
     var template = 'src/docs/templates/' + data.contents.template; 
     return fs.readFileSync(template).toString(); 
    }, {}, { engine: 'jade' })) 
    .pipe(rename({extname:'.html'})) 
    .pipe(gulp.dest('./dist/docs')); 
}); 

のsrc /ドキュメント/ページ/

--- 
template: index.jade 
title: Europa 
--- 
This is a test. 

のsrc /ドキュメント/テンプレート/ test.md index.jade

doctype html 
html(lang="en") 
    head 
    title=contents.title 
    body 
    h1=contents.title 
    div !{contents.body} 

DIST /ドキュメント/ test.htmlという

<!DOCTYPE html><html lang="en"><head><title>Europa</title></head><body><h1>Europa</h1><div><p>This is a test. </p></div></body></html> 
+0

あなたは素晴らしいです!私はギャルを愛し始めています...私はジキルからミドルマン、ギャツビー、メタルミスに移行しました。私はこれらのツールのどれも必要としないことに気づきました。 –

+0

玉の中に広がっていると不平を言っています: "ファイル名"オプションは "相対"パス、> 1 |を使用する必要があります。 _layout –

+0

は決して分かりません。 –

0

あなたはgulp-markdownto-jsonを使用する必要はありません。そこに良いソリューションがたくさんある場合。例えば:

  • Remark - (JSON形式)ASTツリーに値引きを解析値下げプロセッサです。これは、YAMLのフロントマートのサポートを箱から出しています。ところで、さまざまなユースケースのための多くのプラグインがあります。
  • article-data - フロントマターを使わずにマークダウン記事からデータを抽出します。個人的には、このパッケージを使用します。なぜなら、frontmatterの正しいデータについて心配することなく、juse plain markdownファイルを書くのに役立つからです。マークダウンファイルからデータを抜き出し、gulp-pluginに渡し、配列に集めたり、記事を分析したりするなど、何でもできます。

Here is an exampleは、どのように私は私の個人的なブログで記事データを使用しています。

関連する問題

 関連する問題