Pug & Sass篇

PugやSassをnpm-Scriptsで監視するまでをさくっと体系的に書いているところが少なかったので書きます。

Stylus篇はこちら。

誰が読者対象？

htmlを複数ページ作成して、ヘッダーやフッターなどの共通部分を

自動生成したいなっていう欲に駆られたらまず読んでほしいです。

2019年9月現在の個人的おすすめを教えます。

phpでやろうって人は対象外。

JavaScriptの知識でなんとかならないかということを出発地点に情報収集していったのが今回のエントリです。

Node.js及びjsonをちょこっと触るだけでなんとかなります。

いかに便利であるは他の方が散々書かれていますので、見慣れない単語が出てきたら逐一ググってください。

何ができるの?

Pugを使えばhtmlの無駄を省いて書けます。

Sass(SCSSではない)を使えばCSSの無駄を省いて書けます。

それだけです。

個人的に何をしてはいけないのか

CSSに似てるからってSCSSに流されない。

gulpは使わない。

npm i -g

は極力避ける。

mosaの胃薬 | 【npm】グローバルインストールは控えるべき

詳解

Node.jsをインストール、初期化する。

npmでPugとnode-sassをインストールする。

npm i pug

21/11/02追記

Node.js v16.10.0、npm 7.24.0、pug 3.0.2現在、pug-cliも入れないと動きません。

npm i pug-cli

お試しあれ。追記おわり

npm i node-sass

package.jsonを編集してPugとSassを使えるようにする。

{
  "scripts": {
    "pug": "pug",
    "node-sass": "node-sass"
  }
}

走らせるときは

npm run <script name>

引数をつけたい時は

npm run <script name> -- <option command>

ヘルプはこれで見られるよ。

npm run pug -- -h

npm run npde-sass -- --help

npm-run-allをインストールして、

npm i npm-run-all

直列: serial、

run-s <script name> <script name>

並列: parallelで実行。

run-p <script name> <script name>

こんな感じに書く。

"scripts": {
  "build-pug": "pug <input directory> -b <input directory> -o <output directory> -P",
  "build-sass": "node-sass <input directory> -o <output directory>",
  "build": "run-p build-*",
  "watch-pug": "pug <input directory> -b <input directory> -o <output directory> -P -w",
  "watch-sass": "node-sass <input directory> -o <output directory> -w",
  "start": "run-p watch-*"
}

start restart stop testはrunがいらない。これで監視開始なのだ。

npm start

preタグを複数行にまたいで使いたいときにはこれもいれよう。

npm i jstransformer-escape-html

ローカルサーバー立ち上げたりいろいろできるけど、とりあえずこんなもん。

記法は各々調べよう。おわり。

以下、似たようなやつとか。

html: ejs, haml, pug

css: LESS, sass, Stylus

task runner: grunt, gulp, webpack, parcel