Node.jsを使ってPugとSassを導入してみる

2020年9月1日 15:39

Scoopを使いNode.jsを入れることができたので、そのNode.jsを使いPugとSassを使えるようにセットアップします。

（注釈：Pug、SassはそれぞれHTML、CSSをより書きやすくしたり機能を拡張したテンプレートエンジンやメタ言語と呼ばれるものです。）

Scoopのインストールの仕方は以下の過去記事からどうぞ

yarnのインストール

最初にNode.js用のパッケージマネージャーを使ってインストールしていくのですが、Node.jsにはじめから付属している「npm」というパッケージマネージャーより「yarn」という別のパッケージマネージャーのほうが早く簡潔に動作するらしいのでそちらを使いたいと思います。

参考記事：npm vs yarnどっち使うかの話 - Minimal Blog

yarnの詳細を見るために公式サイトを見に行ったら、URLにclassicという文字列があるのを発見。
https://classic.yarnpkg.com/ja/
URLを削り https://yarnpkg.com/ へ行くと「Yarn 2」との文字が。「For 1.x docs, see classic.yarnpkg.com」とあるので最初に行ったclaasic付きのサイトは古いバージョンだったということかな？
どうせだったら最新バージョンで勉強したいのでYarn 2についての日本語情報を調べてみたけどそれほど見つかりませんでした。なので公式サイトに書いてあることをそのままやってみることにしようとおもいます。

参考記事：yarn 2について書いてる記事
Berry(yarn v2) + TypeScript + PnP + Workspace でプロジェクトを作ってみた感想 - Qiita
YarnV2 こと Yarn@berry を試してみている - Qiita

最初にyarnをnpmを使ってグローバルインストールします。

npm install -g yarn

このままだとインストールしたyarnのバージョンを「yarn -v」で調べても1.22.4とclassic環境のままです。
これをv2の最新バージョンで使うには特別なコマンドが必要です。

まずNode.jsを使いたいプロジェクトのフォルダに移動し

yarn set version berry

というコマンドを実行します。そうしたあとに「yarn -v」を実行するとバージョンが2.1.1となりv2になったことが確認できました。
あくまで上のコマンドを実行したフォルダ内でのみv2になるので他のフォルダに移動するとclassic環境のままで使えます。

PugとSassのインストール

これでyarn v2が使いえるようになったのでPugとSassをインストールします。
今回はテスト用に「sass_pug」というフォルダを作りそこへ移動します。そして

yarn init

というコマンドを実行し「sass_pug」フォルダ内にプロジェクトの新規作成をします。

新規作成したら「yarn add」を使いパッケージをインストールします。
Sassは「sass」というパッケージ、Pugは「pug」とコマンドラインから使えるようにするための「pug-cli」というパッケージを入れます。

yarn add sass pug pug-cli

インストールが完了したら実際にコマンドラインで動かせるように「sass_pug」フォルダ内に作られている「package.json」ファイルにスクリプト設定を追加します。

元々のファイル内容は

{
 "name": "sass_pug",
 "dependencies": {
   "pug": "^3.0.0",
   "pug-cli": "^1.0.0-alpha6",
   "sass": "^1.26.10"
 }
}

となっているはずなのでscripts部分を追加し

{
 "name": "sass_pug",
 "dependencies": {
   "pug": "^3.0.0",
   "pug-cli": "^1.0.0-alpha6",
   "sass": "^1.26.10"
 },
 "scripts": {
   "sass": "sass",
   "pug": "pug"
 }
}

とします。
「"sass": "sass"」の左側がコマンド名で右側が実行するコマンドの内容です。
これで

yarn run sass

とrunを付けて実行するとsassが実行されたり

yarn run sass --version

とオプションを付けるとバージョンが表示されます。
バージョンを確認する専用のコマンドを用意したい場合は

"scripts": {
  "sass": "sass",
  "pug": "pug",
  "pug:v": "pug --version"
}

という風に「"pug:v": "pug --version"」を追加し

yarn run pug:v

と実行するとこのコマンドだけでバージョンが表示されます。

ちまみにrunは省略でき

yarn sass --version
yarn pug:v

と、この状態でも動かすことができます。

Pug & Sassの動作確認

最後にテストとしてそれぞれ公式サイトに用意されていた例文を少し変えてシンプルにしたものを「src」フォルダに保存し「dist」フォルダに出力したいと思います。

yarn pug -P -o dist src/index.pug
yarn sass src/style.scss dist/style.css

オプションの詳細の説明は省きますがこれで上手く出力され問題なく動くことが確認されました。

出力前のファイル
index.pug

doctype html
html(lang="en")
 head
   title Pug
 body
   h1 Pug - node template engine
   #container.col
     p.
       Pug is a terse and simple templating language with a
       strong focus on performance and powerful features.

style.scss

nav {
 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 li {
   display: inline-block;
 }

 a {
   display: block;
   padding: 6px 12px;
   text-decoration: none;
 }
}

出力後のファイル

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Pug</title>
 </head>
 <body>
   <h1>Pug - node template engine</h1>
   <div class="col" id="container">
     <p>
       Pug is a terse and simple templating language with a
       strong focus on performance and powerful features.
     </p>
   </div>
 </body>
</html>

style.css

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
nav li {
 display: inline-block;
}
nav a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}

/*# sourceMappingURL=style.css.map */

参考サイト

Yarn v2 公式：Home | Yarn - Package Manager
Yarn classic 公式：Yarn
Pug 公式：Getting Started – Pug
pug GitHub：pugjs/pug: Pug – robust, elegant, feature rich template engine for Node.js
pug-cil GitHub：pugjs/pug-cli: Pug's CLI interface
Sass 公式：Sass: Syntactically Awesome Style Sheets

この記事が気に入ったらサポートをしてみませんか？