pug(パグ、HTML拡張言語でビルドしてHTML出力)を使って、HTMLを書いてみた
公式HP
https://pugjs.org/api/getting-started.html
Webプログラマにも、フロントエンドの知識・技術が必要になってきたので色々とお勉強。
とりあえず、一番シンプルっぽいpug(テンプレート・エンジン)でHTMLを書いてみる
0, pug(パグ)は、node.jsパッケージなのでnpmもいいけどyarn(Facebookが作ったnpm改良版。どこでも使えるようにグローバルインストールする)
|
1 |
npm install -g yarn |
1, プロジェクトフォルダを作る
|
1 |
mkdir pug_test && cd pug_test |
2, package.jsonを作る(ここいら辺をcreate-projectとかで一発で出来ないのだろうか…。)
|
1 |
yarn init |
3, pugパッケージをインストールして、開発環境を最初に作る。
|
1 |
yarn add pug pug-cli |
4, pugファイル置き場を作って、a.pugファイルを置く
|
1 2 |
mkdir -p src/pug vi src/pug/a.pug |
5, a.pugファイルにhello,worldを書く。細かい文法を調べんと！
|
1 2 3 4 5 6 |
doctype html html(lang="ja") head title 適当なタイトル body h1 hello,world |
6, ビルドしてHTML出力するためのコマンドをpackage.jsonに追加
|
1 2 3 4 5 6 |
"scripts": { "start": "yarn run watch:pug --watch", "build": "yarn run pug", "pug": "pug src/pug/ --hierarchy -o dist/html -P", "watch:pug": "pug src/pug/ --hierarchy -o dest/html -P -w" }, |
|
1 2 3 |
# pug_test/dest/html/a.htmlに出力される。 # 出力先は、package.jsonのscriptsの記述を変える yarn build |
7, 修正する度に、自動でリビルドして欲しい(ブラウザはF5リロードで再表示する)
|
1 2 3 4 5 6 7 8 |
yarn start yarn run v1.22.4 $ yarn run watch:pug --watch $ pug src/pug/ --hierarchy -o dest/html -P -w --watch watching src/pug/a.pug rendered /Users/ユーザー名/pug_test/dest/html/a.html # a.pugを修正すると、renderedが１行追加されてリビルドされる。 |
ブラウザの自動リロード(gulp+browser-sync)までやりたかったけど、上手く行かない…。
プロントエンド周りは流行り廃りが激しくて、記述で実行するので、本当にプログラミング的思考が必要だな。
組み合わせて使う場合はコピペで上手くいかないので、どう書き直さないとダメなのか？って真面目に考える必要がある。