gulp で markdown から html と pdf を生成してみる


## やりたいこと

markdown から、html と、pdf を自動で生成したい

## gulp ってなあに?

htmlのビルドツール

```
The streaming build system
```

- [gulpjs/gulp](https://github.com/gulpjs/gulp)

### ビルドツール?

最近のマークアップ界隈では、コードを書いてからリリースするまでにいろいろやることがある

- coffeescript の js 化
- javascript の minify
- Sass の css 化

などなど...

その辺の処理をまとめて自動化してくれるツール
rake とか make の html 版だと思うと良さそう

### どんなのがあるの?

メジャーなのは、[Grunt](http://gruntjs.com/)
[gulp](http://gulpjs.com/)は、ビルドファイルが Grunt より書きやすいらしく、こちらに移るユーザが増えてきて、米国では gulp vs Grunt で大戦争中らしい

今回は、ビルドファイルが書きやすいと聞いて、gulp を試してみる


## インストール

インストールは、npm を使う

```
$ npm install --save-dev gulp
$ ./node_modules/.bin/gulp -v
[gulp] CLI version 3.6.2
[gulp] Local version 3.6.2
```

## マークダウンを html に 

プラグインを使う

- [sindresorhus/gulp-markdown](https://github.com/sindresorhus/gulp-markdown)


```
$ npm install --save-dev gulp-markdown
```

### gulpfile.js を書く

gulp の Makefile 的なファイル
まずは、サンプルの丸パクリ

```gulpfile.js
var gulp = require('gulp');
var markdown = require('gulp-markdown');

gulp.task('default', function () {
    return gulp.src('intro.md')
        .pipe(markdown())
        .pipe(gulp.dest('dist'));
});

```

デフォルトのタスクで、intro.md を読んで、dist ディレクトリに html 化して置いてくれるっぽい


### マークダウンを書く

マークダウンを、intro.md に用意する
[Makefile ことはじめ - Qiita](http://qiita.com/kasei-san/items/ad25df63260e86c5cc71) の、マークダウンをコピーした


### ビルド

```
$ ./node_modules/.bin/gulp
[gulp] Using gulpfile ~/Dropbox/work/gulp_pdf_sample/gulpfile.js
[gulp] Starting 'default'...
[gulp] Finished 'default' after 19 ms
```

できた

```
$ tree dist
dist
└── intro.html
```

スタイルのあたってない素の html が生成された

- https://raw.githubusercontent.com/kasei-san/gulp_pdf_sample/master/dist/html/intro.html

## マークダウンを pdf に 

こっちもプラグインを用意

- https://github.com/sindresorhus/gulp-markdown-pdf

```
$ npm install --save-dev gulp-markdown-pdf
```

ついでに、make clean 的なことをしたくなったので、gulp-clean も導入

```
$ npm install --save-dev gulp-clean
```

### gulpfile.js

```gulpfile.js
var gulp        = require('gulp');
var markdown    = require('gulp-markdown');
var markdownpdf = require('gulp-markdown-pdf');
var rimraf       = require('rimraf');

// default task do clean, html and pdf task
gulp.task('default', ['clean', 'html', 'pdf']);

// markdown to html
gulp.task('html', function () {
  return gulp.src('intro.md')
    .pipe(markdown())
    .pipe(gulp.dest('dist/html'));
});

// markdown to pdf
gulp.task('pdf', function () {
  return gulp.src('intro.md')
    .pipe(markdownpdf())
    .pipe(gulp.dest('dist/pdf'));
});

// cleanup dist dir
gulp.task('clean', function (cb) {
  rimraf('dist', cb);
});
```

- clean タスクは、結果格納ディレクトリ dist の中身を空に
- pdf タスクは、intro.md を読んで、dist/pdf に pdf ファイルを生成
- html タスクは、intro.md を読んで、dist/html に html ファイルを生成
- デフォルトタスクは、clean, html, pdf の順にタスクを実行する

### ビルド

```
$ ./node_modules/.bin/gulp
[gulp] Using gulpfile ~/Dropbox/work/gulp_pdf_sample/gulpfile.js
[gulp] Starting 'clean'...
[gulp] Starting 'html'...
[gulp] Starting 'pdf'...
[gulp] Finished 'html' after 29 ms
[gulp] Finished 'pdf' after 2.05 s
```

htmlとpdfが生成された

```
$ tree dist
dist/
├── html
│   └── intro.html
└── pdf
    └── intro.pdf

2 directories, 2 files
```

- html → https://raw.githubusercontent.com/kasei-san/gulp_pdf_sample/master/dist/html/intro.html
- pdf → https://github.com/kasei-san/gulp_pdf_sample/blob/master/dist/pdf/intro.pdf?raw=true

pdf は内部的には、PhantomJS の実行結果を pdf で出力(印刷)しているだけなので、
リンクをクリックしたりはできないので注意


## ページ番号を振る

```gulpfile.js
// markdown to pdf
gulp.task('pdf', function () {
  return gulp.src('intro.md')
    .pipe(markdownpdf({
       // see: https://github.com/alanshaw/markdown-pdf
       // フルパスを指定しないと途中で止まる
       runningsPath : path.resolve('markdown-pdf/runnings.js')
      }))
    .pipe(gulp.dest('dist/pdf'));
});
```

```markdown-pdf/runnings.js
exports.header = null;
exports.footer = {
  height   : "2cm",
  contents : function(pageNum, numPages) {
    return "<hr>\n<h3>footer <span style='float:right'>" + pageNum + " / " + numPages + "</span></h3>"
  }
}
```

## 感想

gulpfile が非常に直感的でわかりやすい

## TODO

- pdf と、html で異なる css をあてたい
- html を自動的に github ページに up したい
- 複数個のマークダウンを、html では複数ページに、pdfでは1個のファイルにして、ページ番号を振りたい

## github

- https://github.com/kasei-san/gulp_pdf_sample

## 参考

- [Gruntに置き換わるか？新生ビルドシステム「gulp」v3.5.2入門 | REFLECTDESIGN](http://re-dzine.net/2014/02/getting-started-with-gulp/)
- [打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ | OpenWeb](http://openweb.co.jp/2013/12/26/%E6%89%93%E5%80%92grunt%EF%BC%81node-js%E7%94%A8%E3%81%AE%E6%96%B0%E3%81%9F%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0gulp%E3%81%93%E3%81%A8%E3%81%AF%E3%81%98%E3%82%81/)
- [npmでnode.jsのpackageを管理する - Qiita](http://qiita.com/sinmetal/items/395edf1d195382cfd8bc)
- [gulp 3.5でgulp.runがdeprecatedになりました | Web scratch](http://efcl.info/2014/0125/res3630/)
- [Node.js - Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita](http://qiita.com/shuhei/items/4aaa550d1ad30d2fc3b5)
- [JavaScript - gulp入門 - Qiita](http://qiita.com/svartalfheim/items/b586b6772ffa93934a88)
- [alanshaw/markdown-pdf](https://github.com/alanshaw/markdown-pdf)