メサイア・ワークス

gulpとbrowser-syncを使って、pugファイルを修正したら、自動的にブラウザリロードするようにしてみた。

gulpとbrowser-syncを使って、pugファイルを修正したら、自動的にブラウザリロードするようにしてみた。

参考URL
https://agrius.net/entry/coding-with-pug/

ブラウザをF5リロードしないと反映されないので、それも自動化して欲しい(gulpとbrowser-syncを使う)

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

1, 適当なプロジェクトフォルダを新規作成

2, pugとgulpとbrowser-syncなど、必要なnodeパッケージをインストール

2, index.pugやフォルダを生成する

hello,worldなpugファイル

3, 自動リロードのためのgulpfile.jsをルートディレクトリに配置
これが最重要!

4, package.jsonに、コマンドラインからyarn devで自動リロードするコマンドを記述する

5, コマンドラインから実行すると、http://localhost:3000/がブラウザで表示される。
今時点では、pug->htmlへの変換が起こらず、Cannot GET / と表示される。

6, src/pug/index.pugを適当に修正して保存すると、dist/index.htmlが出力される。

この時点でF5リロードすると、hello,worldという文字列が表示され、これ以降は、index.pugを修正&保存すると、自動的にブラウザがリロードされ、常にソースと同期される。やったね!
とりあえず、gulpfile.jsの書き方を覚えたいと・・・。

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