元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

Node.jsとVS CodeでHTML・CSSの開発環境を作る

Node.jsとVS CodeでHTML・CSSの開発環境を作ってみました。タスクランナーのGulpを使わずに、npm scriptsでPugとSassの変換処理を自動化してみました。また、ファイルに変更があったら自動でブラウザを更新するようにしました。

やりたいことは4つで、1.PugからHTMLへ変換、2.SassからCSSへ変換、3.1と2の自動化、4.ブラウザの自動更新です。

前提

OS:Linux Mint 21

Node.jsのパッケージを使って、Pug・SassファイルをHTML・CSSファイルにコンパイルし、VS Code拡張機能でブラウザの自動更新をします。

下準備

作業ディレクトリを作成し、そのディレクトリに移動します。次にNode.jsのパッケージをインストールします。

mkdir ディレクトリ名
cd ディレクトリ名
yarn init -y
yarn add -D pug-cli
yarn add -D sass

yarn init -yで、package.jsonが作成されます。

npm scriptsで自動コンパイルする

package.jsonにPugとSassの処理をそれぞれ記述します。ファイルを監視し、変更があればコンパイルする処理をコマンドに登録します。

"scripts": {
  "watch:sass": "sass --watch sass/style.scss:css/style.css",
  "watch:pug": "pug -w ./ -o ./html -P"
}

以下で実行します。

npm run watch:pug

yarnの場合は、以下で実行します。

yarn watch:pug

並列処理

シェルスクリプトは、&で並列処理ができるそうです。

yarn watch:pug & yarn watch:sass

PugとSassの処理を並列で実行します。このコマンドもnpm scriptsに登録します。

"scripts": {
  "watch": "yarn watch:pug & yarn watch:sass",
  "watch:sass": "sass --watch sass/style.scss:css/style.css",
  "watch:pug": "pug -w ./ -o ./html -P"
}

以下で実行します。

yarn watch

※ちなみに、windows+vagrantでフォルダを共有しているとSassの監視が上手くいきませんでした。解決方法は分かりませんが、Linuxでは上手くいったのでLinuxで環境を用意するのをおすすめします。

ディレクトリの構成

以下は、今回のディレクトリの構成です。※ディレクトリの構成は適宜、変更してください。

プロジェクト名/
├ css/
│  └ (style.cssが生成される)
├ html/
│  └ (index.htmlが生成される)
├ sass/
│  └ style.scss
├ index.pug
├ node_modules/
├ yarn.lock
└ package.json

自動でブラウザを更新する

VS Code拡張機能のLive Serverを追加します。

VS CodeでHTMLファイルを選択した状態でGo Liveボタンを押すとローカルサーバが起動し、ブラウザが立ち上がります。Pugファイル、Sassファイルが更新されるとブラウザの表示も自動で更新されます。

まとめ

今回、行ったことは以下です。

  1. PugをHTMLに変換
  2. SassをCSSに変換
  3. 1と2の自動化
  4. PugファイルまたはSassファイルが更新されたら、ブラウザの表示を自動で更新

HTMLとCSSのみを扱う場合は、今回の対応で作業が効率的になり、ストレスも減るのではないでしょうか。

課題

ブラウザの自動更新の部分をVS Code拡張機能(Live Server)で行いましたが、Node.jsのパッケージで対応できないか調べたいです。

参考サイト