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

created at:

経緯

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

Image from Gyazo

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

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

Image from Gyazo

だいたいはこれでよい。

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

問題点

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

Image from Gyazo

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

Image from Gyazo

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

対応策

良さ気な情報ないし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("/"));
});

Image from Gyazo

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

Pug

Image from Gyazo

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

去年の12月…

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

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

こちらからは以上です。

Image from Gyazo

アーカイブ一覧へ戻る

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップページに戻る