Jadeでゴリゴリ書いてく時にちょっと注意することとか

最近Jadeにハマってます。で、書いてると時々エラーで引っかかることがあるのでメモ。

includeやextendのパス

includeやextendで読んでくるファイルのパスは、コンパイルするルートディレクトリのパスからじゃなくて、呼び出し元のファイルからの相対パス。

つまり、/hoge/fuga/piyo.jadeを編集していて、このファイルから/include/_sugoi.jadeをincludeする場合、

include ../../include_sugoi

とする。

特にextendはレイアウトとかを書いておいて、すべてのファイルで使いまわす場合がほとんどな気がするので注意が必要。

mixinは外部ファイルに定義しといても大丈夫

mixinも定義するファイルを別にしておいて、includeして使える。当たり前といえば当たり前だけど。

/mixin/_saikounomixin.jadeがあったとして、これを/page/hoge.jadeから使いたい場合は、次のようになる。

include ../mixin/_saikounomixin

+saikounomixin(args)

incudeするときに絶対パスを使いたい

上記二点に付随して、よくよく考えたら絶対パス使えれば楽ということにきづいた。

というわけで試してみたら、

the "basedir" option is required to use "include" width "absolute" paths

と怒られてしまった。

なので、optionに、

option: {
    basedir: '<%= path.src %>/jade'
}

という感じでjadeのルートパスを指定してやったところ、無事成功。

そんなわけで、includeするときに絶対パスを使えるようにしたい場合はoptionでbasedirを指定してやりましょう。

参考までにGruntのjade用タスク部分を下記に。

jade: {
    compile: {
        options: {
            pretty: true,
            data: {
                // コンパイル時に渡しておきたいオブジェクト
            },
            basedir: '<%= path.src %>/jade'
        },
        files: [{
            expand: true,
            cwd: '<%= path.src %>/jade',
            src: '**/!(_)*.jade',
            dest: '<%= path.dist %>',
            ext: '.html'
        }]
    }
}

javascriptとかをjadeに直接書く場合とか

ちょっとしたjsをjadeに直接書く場合とか、たまーにしかやらないようなこと。

script
  hoge();
  
  function hoge() {
      console.log('fuga');
  }

はだめで、

script.
  hoge();
  
  function hoge() {
      console.log('fuga');
  }

が正しい。

scriptのあとに、.が必要。そうしないとうまいこと展開してくれない。

=の使い方周り

=の使い方周り、意外とまぎらわしいのでまとめてみる。

入力のあとに実際のコンパイル結果を（Jadeの）コメントアウトで書いてます

elementName= 値で要素の中に値を入れる。elementNameと=の間は半角スペースなどは入れてはいけない。=と値の間に半角スペース。

変数は展開される。文字列を直接入力する場合は''で囲う。javascriptにおける変数への値の代入と思えばいい。

p= '適当な文章'
//- <p>適当な文章</p>
- var val = '適当な文章'
p= val
//- <p>適当な文章</p>

=のみなら文字列はエスケープされる。!=にするとエスケープされないので、タグなどを入れた場合タグとして出力される。

p= '適当な文章 <escaped>'
//- <p>適当な文章&lt;escaped&gt;</p>
p!= '適当な文章 <escaped>'
//- <p>適当な文章<escaped></p> 

Attributesの設定は attr=value。=の前後にスペース入れない。

- var cls = 'hoge fuga piyo'
p(class=cls)
  img(src='/path/to/img.png', alt='image', width=60, height=60)
// <p class="hoge fuga piyo"><img src="/path/to/img.png" alt="image" width="60" height="60"></p>