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

やまろぐはてな

yamanokuの技術メモ。Qiitaは怖くて書けない。

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

経緯

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

f:id:cardboarder:20160923211302p:plain

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

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

f:id:cardboarder:20160923211622p:plain

だいたいはこれでよい。

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

問題点

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

f:id:cardboarder:20160923211942p:plain

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

f:id:cardboarder:20160923212036p:plain

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

対応策

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

www.npmjs.com

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("/"));
});

f:id:cardboarder:20160923213706p:plain

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

Pug

f:id:cardboarder:20160923215134p:plain

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

去年の12月…

github.com

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

こちらからは以上です

f:id:cardboarder:20160923215509p:plain