gulpでpugをコンパイル〜pug・sass・TypeScript・gulpでハイカラなフロントエンド開発〜

さて前回はpug(jade)を使ってみました。

ただ毎回コマンドを打つのはあまりにも億劫なのでgulpというものを使って自動化しましょう。

細かいことはさらっと済ませてちょちょっとやってしまいましょうね。

gulpとは

ガルプと読むらしいです。

gulpはタスクランナーと呼ばれるツールの一種で、要はタスク(件のpugをhtmlに変換するとか)をまとめて一つのコマンドでできるようにしたりさらには自動的に実行できる様にするためのツールです。

厳密にはビルドシステムヘルパーらしいですがまあ多分似た様なものなのでとりあえず

gulp=タスク自動化

と思っておけばいいんじゃないでしょうか。

公式のサイトにも「Automate and enhance your workflow」と書いてあります。

pugやjade、sassなどを使ってみようとググってみるといきなりgulpをインストールしましょうとか言われることが多くgulp=pugやsassのためのツールと勘違いしがち(私だけ?)ですが別にpugやsassなどとは関係ない、独立したツールであるということを理解しておきましょう。

便利なタスク自動化ツールをpugやsassにも使っているだけの話です。

さ、便利なら使いましょう。

gulpのインストール(pug用のパッケージもインストール)

gulpをインストールして使っていきましょう。

gulpにもNode.jsが必要なので入れていない人は前回の記事を参考に入れてください。

そのあとは以下を参考にどうぞ。

npmのinitというよくわかんないのと–save-devという怪しげなコンフィグがありますが説明はちょっと長くなるので次回の記事に書こうと思います。

とりあえず何も考えずにコマンドしちゃってくださいい。

バージョンがどうとかいうワーニングも出ますがこれはgulpのバージョンが上がると消えるらしいので無視して大丈夫です。

gulpfile.jsを書く

gulpfile.jsを作り、gulpに実行させたいタスクを書いていきます。

こんな感じでpugをコンパイルするタスクを作ってから、そのタスクを自動で実行するタスクを作ります。

_で始まるファイルを除外するのはpugのIncludeなどの機能を利用した時に都合がいいからです。そのうち解説しようと思いますが普段_をファイルの頭につけることはないと思うのでわからない人もとりあえず気にしなくても大丈夫です。

読み込み元や読み込み先のフォルダは好きに変えてもらっても当然動きますのでどうぞ。

の部分に関して、gulpでpugをコンパイルする情報は結構あるもののフォルダ構成をそのまま出力先にも持って行っている人ってあんまりいない感じでした。

が、個人的にはそのまま持って行けた方が便利(というか持って行けないと不便)なので探して入れときました。消してもいいです。

Revelとか使う時にこっちの方がいいと思うんですよね。

さて、これで準備が整いました。

実行してみる

実行してみましょう。

まずはpugタスク単体を実行してみます。

その前にテスト用のpugファイルが必要なので適当に作ります。

はい、これでhtmlフォルダ以下にtest1.html・testFolder1/onFolder1.html・testFolder2/onFolder2.html・testFolder2/onFolder2.html

ができたと思います。

できていなかったらどっかで間違えているのかもしれないで見直してみてください。

自動タスクを実行してみる

最後に自動タスクを実行して、ファイルを編集するたびに勝手にコンパイルする様にしてみましょう。

準備はしてあるのでコマンド一つです。

はい。終わり。

試しにさっき作ったpugファイルのpタグの中身でも変更して保存してみると、htmlも更新されることがわかると思います。

結構長くなってしまいましたね。お疲れさまでした。

しかしこれで快適にhtmlがかけますね。

次回はnpmのinitと–save-devについて。

そのあとは引き続きsassとTypeScriptをやっていきます。お楽しみに。

ではまた。

にほんブログ村 IT技術ブログへ
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です