npm-scripts でpugのコンパイルがしたかったことだなあ。 #pug

あーwebpack便利だなあと思い、pugでHTML出力する案件でも使いたいなということで、

gulp-webpackを使う
npm-scriptsでやっちゃう

の二択になるとは思うんですが、後者にしたいなと思いつつ情報があんまり出てこなかったのでメモ書き。

必要なもの

yarn(僕がyarn使ってるだけなので、npmでも大丈夫だとは思います)
pug
pug-cli(ちょっとトラブるので後述参照)
あとはwebpackなりbrowser-syncなりbabelなりお好みで。

$ yarn add pug pug-cliして待つだけ。未来ずらー。

package.json記載例

package.json のscripts部分抜粋。
下記のような感じ。

  "scripts": {
    "pug": "pug src/pug/ --hierarchy -o public -P",
    "watch:pug": "pug src/pug/ --hierarchy -o public -P -w",
    "webpack": "webpack",
    "watch:webpack": "webpack -w",
    "server": "lite-server",
    "watch": "yarn run watch:webpack & yarn run watch:pug",
    "start": "yarn run server & yarn run watch"
  },

上で入れたパッケージ以外のものがあったり、yarn runになってるので、
そのあたりは必要に応じて書き換えるなりしてくださいまし。

あとは$yarn startでwatchされるようになるはず。。
単純にcompileしたいだけなら$yarn run pugですね。

includeファイルも出力されてしまう

共通部品をまとめてincludeする、というのが定番の流れだと思いますが、
ファイル名先頭にアンダーバーを入れておけば出力されない…
という動作を期待していたのですが、見事に出力先に出てきている。

まあそもそもそういう動作が正しい物ではあるのですが(gulpではexcludeを設定して投げているので)、邪魔だし出さないようにしたいですネ。

設定でどうにかできないのかと思ったのですが、
現在（2017/05/15）npmに上がっているpug-cli 1.0.0-alpha6では、
こういったファイルを無視するようになっていないようで。
調べてみたら、GitHubでissueが上がっておりmergeもされている（のだけどnpmへは全然反映されていない）。

ひとまず逃げではあるけど$ yarn add https://github.com/pugjs/pug-cli.git
として解決。