HTMLマークアップ言語を使うpug(旧jade)
- jadeを使用するまでの流れ
- pugとは？
- 作業のまとめ
- 事前準備
- npmのインストール
- pugとsassの自動コンパイルコマンドを設定
- コマンドを実行
- 補足：コンパイルスクリプトなど
- コンパイルの複数実行
- 補足：ウェブ上でHTMLをPugに変換するサイト
jadeを使用するまでの流れ
この項目は現状を記録しておくための雑記ですので本題は次の項目から記述して行きます。
普段、Railsを使ったアプリケーションなどを作成する際に、HTMLではなくHAMLを使用して記述していました。
静的なサイトを作成する際に、ずっとHTMLで記述していました。 しかしこれまでずっとRailsでHAMLを使用していたというのもあり、HTMLでの記述はあまりに面倒だと思い始めまして。。 HAMLを使用できないか？と調べていたのですが、HAMLやSlimは主にRailsでの使用が前提なため思っていたものとは違う情報しかでてきませんでした。(この時点ではHTMLのマークアップ言語はHAMLとSlimしか知りませんでした)
調べているとJadeがあるらしいと、npmを使用し導入、自動コンパイルまで済み、あとはscssも同時にコンパイルさせたいなあと調べる中でjadeは今はpugという名前に変わっている。。。！？
ということで、pugの導入、コンパイルコマンド、scssも同時にコンパイルする(複数コマンドを同時に実行させる)方法を忘備録として残しておきたいと思います。
pugとは？
公式サイト(?)的なものよりgithubの方がわかりやすいのでそちらのリンクを貼っておきます。
以下githubのReadmeより引用。
Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers.
Readmeにあるように、pugはHAMLに影響を受けているJavaScript テンプレートエンジンです。
HAMLのように閉じタグなどを使用せずに記述できるため、従来のHTMLよりも高速でマークアップを勧められます。
作業のまとめ
したいこと
※scssファイル、pugファイルは特定のディレクトリを指定せず、ルートディレクトリ以下の全てのファイルを対象とします
※作業はmac 10.14.6で行います。他のバージョンやWindows、ubuntuでは流れが違う可能性がありますので他のサイトを参考にするようお願いいたします。
作業の流れ
- 事前準備
- Xcodeのインストール
- Homebrewのインストール
- nodebrewのインストール
- Node.jsのインストール
- node-sassのインストール
- pug、pug-cliのインストール
- concurrentlyのインストール
- pugとsassの自動コンパイルコマンドを設定
※Node.jsのインストールまでが完了している方は2以降の作業のみになります。
※事前準備の項目については簡単に勧めて行きます
事前準備
Xcodeのインストール
HomebrewのインストールにはXcodeが必要です。
以下のコマンドを実行し、Xcodeをインストールします。
$ xcode-select --install
HomeBrew🍺のインストール
以下を実行
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
nodebrewのインストール
Homebrewを使用してインストールします。
$ brew install nodebrew
Node.jsのインストール
1.インストール可能なバージョンを確認
$ nodebrew ls-remote
2.インストール
$ nodebrew install-binary {version}
最新版をインストール：
$ nodebrew install-binary latest
安定版をインストール：
$ nodebrew install-binary stable
3.インストールしたnodeを有効化
インストールされたバージョンを確認。
$ nodebrew ls # インストールされているバージョンを確認 v12.16.1 v12.16.2 current: none # インストール直後はnoneになっている $ nodebrew use v12.16.2 # 使用するバージョンを指定する $ nodebrew ls # インストールされているバージョンを確認 v12.16.1 v12.16.2 current: v12.16.2
4.環境パスを通す
bashの場合
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
5.ターミナル再起動、もしくはsourceコマンドでパスを読み込む
6.nodeが使用できるか確認
$ node -v v12.16.2
npmのインストール
Package.jsonファイルを作成
プロジェクトのルートディレクトリで以下を実行し、package.jsonを作成。(すでにある場合はこの作業は不要です。)
npm init
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
pugとsassの自動コンパイルコマンドを設定
package.jsonのscriptに以下を追加。
"watch": "concurrently \"pug . --out . --watch --pretty\" \"node-sass */scss/ --output */css/ --output-style compressed --watch --source-map true\""
※上記の場合では、scssフォルダのあるディレクトリにあるcssフォルダにcssファイルを保存、htmlはpugと同じフォルダに保存されます。
ディレクトリを指定する場合
"watch": "concurrently \"node-sass ./build/scss --output ./public/css --watch --output-style compressed\" \"pug ./build/pug --out ./public/ --watch --pretty\""
タスクの複数実行について
npm run command & command2のように複数実行することも可能なのですが、そうすると先のタスクが終了するまで次のタスクが実行されないため並行して実行したい場合には不便です。
そこでconcurrentlyを使用します。
bashでは以下のようにします。
concurrently "script1" "script2"
package.jsonに記述する際はダブルクオーテーションをバックスラッシュ\でエスケープします。
タスク名では呼び出せないようなのでスクリプトを直接記述して行きます。
"タスク名": "concurrently \"スクリプト1\" \"スクリプト2\""
コマンドを実行
以下を実行することで、scssやpugを編集すると随時cssやhtmlファイルに変換されます。css、htmlファイルがない場合は自動で作成され、すでにファイルがある場合は上書きされます。
npm run watch
以上です。
以下、補足でスクリプトを記述しておきます。
補足：コンパイルスクリプトなど
jsonファイルにタスクを記述して行きます。
Sassのコンパイル
"sass": "node-sass ./build/scss --output ./public/css --output-style compressed"
Pugのコンパイル
"pug": "pug ./build/pug --out ./public/ --pretty"
コンパイルの複数実行
"build": "npm run sass & npm run pug"
Sassの自動コンパイル（Watch/監視）
"node-sass ./build/scss --output ./public/css --watch --output-style compressed\"
Pugの自動コンパイル（Watch/監視）
"pug ./build/pug --out ./public/ --watch --pretty\"
以上です。
ディレクトリなどは適宜変更してください。
補足：ウェブ上でHTMLをPugに変換するサイト
Pug導入時に使用しました。
