Jadeのprettyはアテにならなかった話（と今更ですがPugについて）

経緯

Jadeは通常何もせずコンパイルするとこうなる

そこでgulpとかのオプションでこう設定するとインデント維持して見やすくなる

var jade = require("gulp-jade");
 .pipe(jade({
   pretty: '\t',
 }))

だいたいはこれでよい。

ただコーディングガイドラインで「インデント除去してください」みたいな指示が来た時困る。

問題点

prettyに関する情報が少ないのでひとまず勘で「\t」としているところを「\v」にしてみた。

ブラウザでパッとみた感じは良さそう。だが、

ソースは文字化けしとるやないかい。

対応策

良さ気な情報ないしJadeのオプションに頼るのはもうやめよう。そうだnpmだ。

https://www.npmjs.com/package/gulp-outdent

var gulp = require('gulp');
var jade = require("gulp-jade");
var outdent = require("gulp-outdent");
gulp.task('jade', function(){
  gulp.src('*.jade')
    .pipe(jade({
      pretty: '\t'
    }))
    .pipe(outdent())
    .pipe(gulp.dest("/"));
});

これでOKでしょ。npmパッケージで柔軟に対応できる男になりたい

Pug

上記インデントの件とは別ですが、Jadeが既存の商標と衝突してたみたいでPugに改名していたそうです（最近知った）

去年の12月…

Renaming jade -> pug · Issue #2184 · pugjs/pug

Jade特に考えずに使うならそのままでいいけど、ほどよいタイミングでPugに乗り換えましょう。拡張子以外書き方はだいたい今まで通り。

こちらからは以上です。