アーカイブ

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

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

経緯

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

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

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