npm scriptsでPugとSassを同時にwatchする

この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

構成例

├ build/
　├ pug/
　│　└ index.pug
　├ scss/
　│　└ style.scss
├ public/
　└ index.html
　├ css/
　│　└ style.css

npm-install

node-sass

npm install node-sass --save-dev

pug

npm install pug --save-dev
npm install pug-cli --save-dev

concurrently

npm install concurrently --save-dev

Sass のコンパイル

"build-sass": "node-sass ./build/scss --output ./public/css --output-style compressed"

Sass を使ったコンパイルのタスクを作成します。

Pug のコンパイル

"build-pug": "pug ./build/pug --out ./public/ --pretty"

Pug のコンパイルのタスクを作成します。

コンパイルの複数実行

"build": "npm run build-sass & npm run build-pug"

コンパイルの実行はこのように、複数のタスクをまとめたタスクを作成することができます。
ただし、この場合ですと build-sass が終了した後に build-pug が実行されます。

Pug の監視

"pug ./build/pug --out ./public/ --watch --pretty\"

Pug のファイルを監視 (Wacth) するタスクを作成します。

Sass の監視

"node-sass ./build/scss --output ./public/css --watch --output-style compressed\"

Sass のファイルを監視 (Wacth) するタスクを作成します。

監視の同時実行

"watch": "concurrently \"node-sass ./build/scss --output ./public/css --watch --output-style compressed\" \"pug ./build/pug --out ./public/ --watch --pretty\""

監視 (Wacth) は先ほどのように複数タスクを書いて実行しようとしても、先に書いたタスクが終了するまで次のタスクが実行されないため、並行して実行するために concurrently を使用します。

concurrently "スクリプト1" "スクリプト2"

のように実行できます。

package.json に書くときはダブルコーテーションを \ でエスケープしてます。
ちなみにタスク名では呼び出せなかったため、直接スクリプトを記述しています。

"タスク名": "concurrently \"スクリプト1\" \"スクリプト2\""

package.json

{
  "name": "",
  "version": "1.0.0",
  "keywords": [
    "util",
    "functional",
    "server",
    "client",
    "browser"
  ],
  "author": "",
  "contributors": [],
  "dependencies": {},
  "devDependencies": {
    "concurrently": "^3.5.0",
    "node-sass": "^4.5.3",
    "pug": "^2.0.0-rc.4",
    "pug-cli": "^1.0.0-alpha6"
  },
  "scripts": {
    "build": "npm run build-sass & npm run build-pug",
    "build-pug": "pug ./build/pug --out ./public/ --pretty",
    "build-sass": "node-sass ./build/scss --output ./public/css --output-style compressed",
    "watch": "concurrently \"node-sass ./build/scss --output ./public/css --watch --output-style compressed\" \"pug ./build/pug --out ./public/ --watch --pretty\""
  }
}

構成例