やりたいこと
markdown から、html と、pdf を自動で生成したい
gulp ってなあに?
htmlのビルドツール
The streaming build system
ビルドツール?
最近のマークアップ界隈では、コードを書いてからリリースするまでにいろいろやることがある
- coffeescript の js 化
- javascript の minify
- Sass の css 化
などなど...
その辺の処理をまとめて自動化してくれるツール
rake とか make の html 版だと思うと良さそう
どんなのがあるの?
メジャーなのは、Grunt
gulpは、ビルドファイルが 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 に
プラグインを使う
$ 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 の、マークダウンをコピーした
ビルド
$ ./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 が生成された
マークダウンを 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個のファイルにして、ページ番号を振りたい