読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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

jade

既存の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