メサイア・ワークス

pug(パグ、HTML拡張言語でビルドしてHTML出力)を使って、HTMLを書いてみた

pug(パグ、HTML拡張言語でビルドしてHTML出力)を使って、HTMLを書いてみた

公式HP
https://pugjs.org/api/getting-started.html

Webプログラマにも、フロントエンドの知識・技術が必要になってきたので色々とお勉強。
とりあえず、一番シンプルっぽいpug(テンプレート・エンジン)でHTMLを書いてみる

0, pug(パグ)は、node.jsパッケージなのでnpmもいいけどyarn(Facebookが作ったnpm改良版。どこでも使えるようにグローバルインストールする) 

1, プロジェクトフォルダを作る

2, package.jsonを作る(ここいら辺をcreate-projectとかで一発で出来ないのだろうか…。)

3, pugパッケージをインストールして、開発環境を最初に作る。

4, pugファイル置き場を作って、a.pugファイルを置く

5, a.pugファイルにhello,worldを書く。細かい文法を調べんと!

6, ビルドしてHTML出力するためのコマンドをpackage.jsonに追加

7, 修正する度に、自動でリビルドして欲しい(ブラウザはF5リロードで再表示する)

ブラウザの自動リロード(gulp+browser-sync)までやりたかったけど、上手く行かない…。
プロントエンド周りは流行り廃りが激しくて、記述で実行するので、本当にプログラミング的思考が必要だな。
組み合わせて使う場合はコピペで上手くいかないので、どう書き直さないとダメなのか?って真面目に考える必要がある。

モバイルバージョンを終了