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

npm scripts のみで、Sass や Pug のコンパイルをおこなう方法と、監視を同時におこなう方法を紹介します。

Gulp を使わなくてもいいケースは脱Gulp したいと思い npm scripts の勉強してます。

  

構成例

├ 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\""
  }
}
  

共有やブックマークなど