Markdownをgulpを使いutf-8でhtml出力する(styleも適用)

#概要

* Markdownをgulpを使いhtml出力
* jadeを使いヘッドタグを生成しutf-8とcssを適用
* markdownファイルにゴミが入らないように出力
* html整形(おまけ)

#実行環境
* Windows 8.1
* node v0.11.11
* gulp 3.9.0

#構成
```
│  gulpfile.coffee
│  package.json
└─src
    └─md
        │  readme.md
        │  
        └─.template
                _template.css
                _template.jade
```

Markdownファイルは不要な構文も含まれるため「src」の中に入れておきます。

#パッケージのインストール
`npm i -D coffee-script gulp gulp-front-matter gulp-html-prettify gulp-layout gulp-markdown jade`

#INPUT

##Markdownファイル

markdownファイルを適当に作成します。
先頭の7行は(---から---)は後ほど説明します。

```src/md/readme.md
---
title: "my title"
description: "my description"
keywords: ["my keyword1", "my keyword2", "my keyword3"]
robots: ["index","follow", "noodp", "noydir", "noarchive"]
layout: "src/md/.template/_template.jade"
---
#Markdownをutf-8でhtml出力する(styleも適用)


## Demo

デモとかです。

<http://qiita.com/>

## Building

git clone xxxxxxxxxx

##See

### Hoge

* [Google](https://www.google.co.jp/)
* [Yahoo! JAPAN](http://www.yahoo.co.jp/)
```

## テンプレート
src/md/readme.mdの(layoutを除く)先頭7行で指定したパラメータが下記で展開されます。
layoutはこのファイルのパスを記述する必要があります。
jadeの構文になりますが「include _template.css」の部分で外部cssをインラインで展開するようにしています。
!= contentsの部分にmaekdownの先頭7行目以降のhtmlが展開されます。
共通のヘッダー、フッターを加えたい場合などはbodyに適宜記述してください。

```src/md/.template/_template.jade
doctype html
html(lang="ja")
	head
		meta(charset="utf-8")
		block meta
			meta(name='viewport', content='width=device-width, initial-scale=1')
			meta(name="description", content=description)
			meta(name="keywords", content=keywords)
			meta(name="robots", content=robots)
		title= title
		style
			include _template.css
	body
		!= contents
```

## テンプレートで使うスタイル
```src/md/.template/_template.css
・・・好きに書いてください・・・
```

私はgithubスタイルを適用したかったため以下からダウンロードし適用しました。
<https://gist.github.com/andyferra/2554919>

## Gulpfile

```gulpfile.coffee
gulp = require "gulp"
frontMatter = require "gulp-front-matter"
prettify = require "gulp-html-prettify"
layout = require "gulp-layout"
markdown = require "gulp-markdown"

gulp.task "markdown", ->
	gulp.src ["src/md/**/*.md"], base: "src/md"
	.pipe frontMatter
		remove: true
	.pipe gulp.dest "."
	.pipe markdown()
	.pipe layout (file) ->
		file.frontMatter
	.pipe prettify
		indent_char: "\t"
		indent_size: 1
	.pipe gulp.dest "."

gulp.task "watch", ->
	gulp.watch "src/md/**/*.md", ["markdown"]

gulp.task "default", ["watch"]
```

# Output

上記のmarkdownタスクを実行すると以下の2ファイルがプロジェクトルートに生成されます。
mdファイルの出力が不要な場合はmarkdownタスクの5行目の「.pipe gulp.dest "."」を削除してください。
html整形(prettify)はおまけですので不要な場合は削除してください。

## Markdownファイル
```readme.md
#Markdownをutf-8でhtml出力する(styleも適用)


## Demo

デモとかです。

<http://qiita.com/>


## Building

git clone xxxxxxxxxx

##See


### Hoge

* [Google](https://www.google.co.jp/)
* [Yahoo! JAPAN](http://www.yahoo.co.jp/)
```

## HTMLファイル

```readme.html
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="my description">
	<meta name="keywords" content="my keyword1,my keyword2,my keyword3">
	<meta name="robots" content="index,follow,noodp,noydir,noarchive">
	<title>my title</title>
	<style>{{src/md/.template/_template.cssの内容}}</style>
</head>

<body>
	<h1 id="markdown-utf-8-html-style-">Markdownをutf-8でhtml出力する(styleも適用)</h1>
	<h2 id="demo">Demo</h2>
	<p>デモとかです。</p>
	<p><a href="http://qiita.com/">http://qiita.com/</a>
	</p>
	<h2 id="building">Building</h2>
	<pre><code>git clone xxxxxxxxxx
</code></pre>
	<h2 id="see">See</h2>
	<h3 id="hoge">Hoge</h3>
	<ul>
		<li><a href="https://www.google.co.jp/">Google</a>
		</li>
		<li><a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
		</li>
	</ul>
</body>

</html>
```

## HTMLファイル(readme.html)のキャプチャ
![fig.png](https://qiita-image-store.s3.amazonaws.com/0/80664/32ae80f0-b4f5-a411-6c0a-f80b7556942d.png)