Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

gulp-html2jadeを使って既存のHTMLファイルをjade/pugに転換する

既存のHTMLをjade/pugに変換する方法です。
このgulpとか言うコ、弊社のコワイ人たちが使ってるツールという激しい偏見があったので極力避けてました。
でもシカタナイネ。
いつまでもWEBブラウザ版使うわけにもいかんし……。

実際のところ

pugは新しい事もあってか、日本語……というか2バイト文字が使えません。
https://github.com/izolate/html2pug
仕方がないので、後方互換なhtml2jadeで代用します。
素のHTMLならpugの記法つかいませんしネ……。

$ npm install --save-dev html2jade
$ npm install --save-dev gulp-html2jade

で、問題のgulpファイルです。
gulpfile.jsという名前にします。

const html2pug = require('gulp-html2pug');
const gulp = require('gulp');
const html2jade = require('gulp-html2jade');
const options = {nspaces:2};

gulp.task('jade', function(){
  return gulp.src('index.html')
    .pipe(html2jade(options))
    .pipe(gulp.dest('.'));
});

これで以下のコマンドを叩けばindex.htmlがindex.jadeになって吐き出されます。

$ gulp jade

idex.jadeを入れる場合、pug-cliをぶっ込んだ状態で、
以下のコマンドを叩いて上げれば同一ディレクトリ上にindex.htmlとして展開されます。

$ pug index.jade