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ファイルが更新されるとブラウザの表示も自動で更新されます。
まとめ
今回、行ったことは以下です。
- PugをHTMLに変換
- SassをCSSに変換
- 1と2の自動化
- PugファイルまたはSassファイルが更新されたら、ブラウザの表示を自動で更新
HTMLとCSSのみを扱う場合は、今回の対応で作業が効率的になり、ストレスも減るのではないでしょうか。
課題
ブラウザの自動更新の部分をVS Codeの拡張機能(Live Server)で行いましたが、Node.jsのパッケージで対応できないか調べたいです。
