Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

やりたいこと

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

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

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away