jade でアクティブページの html 要素に class 等を付与する

なんかきっともっとうまいことやる方法があるのだろうけど、
今はこれでなんとかした、その場しのぎ的なメモ。

Dreamweaver で言うこんなことやりたかった

Dreamweaver でテンプレート機能を使ったまま、現在ページのメニューに色を付ける
http://www.magical-remix.co.jp/magicalog/archives/650

Grunt を使用していた時は
Gruntfile.js にゴニョゴニョ書いてなんとかしてた記憶はあるけど、gulp に変更してどうすればいいのか思い浮かばないので jade で以下の用にしてみた。

使用したパッケージ

package.json

{
  devDependencies{
    "gulp": "^3.8.10",
    "gulp-jade": "^0.9.0"
  }
}

以下の用に記述

_inc_nav.jade

- var is_active_1 = ''
     ,is_active_2 = ''
     ,is_active_3 = ''
     ,is_active_4 = ''
     ,is_active_5 = '';

- if(currentUrl == 1){
  - is_active_1 = 'is_active';
-}
- if(currentUrl == 2){
  - is_active_2 = 'is_active';
- }
- if(currentUrl == 3){
  - is_active_3 = 'is_active';
- }
- if(currentUrl == 4){
  - is_active_4 = 'is_active';
- }
- if(currentUrl == 5){
  - is_active_5 = 'is_active';
- }

nav
  ul
    li
      a(href="#first",class='#{is_active_1}') First
    li
      a(href="#second",class='#{is_active_2}') Second
    li
      a(href="#third",class='#{is_active_3}') Third
    li
      a(href="#forth",class='#{is_active_4}') Forth
    li
      a(href="#fifth",class='#{is_active_5}') Fifth

index.jade

//- ページごとに currentUrl の数字を変更すればOK
- var currentUrl = 1;
include _inc_nav.jade

展開されるHTML

index.html

<nav>
  <ul>
    <li><a href="#first" class="is_active">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
    <li><a href="#forth">Forth</a></li>
    <li><a href="#fifth">Fifth</a></li>
  </ul>
</nav>

感想

SublimeText にしたら Dreamweaver に戻れない体質になったけど、
静的ページだけのサイトの時は Dreamweaver のテンプレート機能は便利だったなと振り返るときはある。
ページが増えてきたら変数増やしたりするのが面倒そうだけど、そんなサイトはまた違うやりかたがあると思う。
（そもそもこのやり方もスマートじゃない気がする。）

パッケージとかでなんとかできそうなのあればぜひ教えて下さい。
よろしくお願いします。