Gulpによるコーディングの効率化

例えば、Sassもしくはcompassだけを利用してHTMLとCSSを構築することはあまりありません。純粋なCSSの改修だけならそれもあるかもしれませんが、基本的にはPugとSassやPugとcompassを両方使うことになります。
しかし、それぞれにCLI(コマンドラインインターフェース)が存在するため、SassでWatchしているときはPugのコンパイルができません。逆もしかりです。
しかし、HTMLとCSSは同時に構築しながら確認していくものです。
そこで、タスクランナーやビルドシステムという仕組みが存在します。

今回はタスクランナーのGlup導入を紹介します。
Javascriptベースのタスクランナーで、プラグインによってタスク処理を管理できる仕組となっています。

Gulpのインストール

Javascriptベースなので、やはりNode.jsは必須です。(まだの方は先にNode.jsをインストールしてください)
Gulpをどこからでも利用できるようにインストールします。

次に実際のプロジェクトフォルダに移動し、そのフォルダでGulpを利用できるようにします。
cdコマンドで移動し、プロジェクトフォルダ直下で以下のコマンドを入力します。

これでプロジェクトフォルダにpackage.jsonというファイルができます。

Gulpを実行するためには、Gulp本体をプロジェクトフォルダにインストールする必要があります。

-Dは–save-devの省略型です。package.jsonに自動的にバージョン情報を追記してくれます。

プラグインのインストールとコンパイル処理

コンパイルを実行するためにはプラグインのインストールが必要になります。

Sassプラグインのインストール

Pugプラグインのインストール

コンパイル処理

Gulpでコンパイル処理を行うためにはjsファイルでの指示が必要になります。
プロジェクトフォルダ直下にgulpfile.jsというファイルを作成します。
基本的な流れとしては、gulpfile.jsの記述内容をCLIでgulpと命令すると実行します。
今回はSassとPugのコンパイルですが、コンパイルしたい時にいちいちgulpと入力するのは非効率なのでWatch処理で変更時に自動コンパイルする記述をします。

まず、利用するプラグインを宣言します。

次にSassのコンパイル処理です。

今回はプロジェクトフォルダ直下のsassフォルダ以下の.scssファイルをcssフォルダに.cssとしてコンパイルします。
3行目の{outputStyle: “expanded”}はコンパイル時のオプションで通常のCSS記述になるようにしています。

次のPugのコンパイル処理です。

今回はプロジェクトフォルダ直下のpugフォルダ以下の.pugファイルをプロジェクトフォルダ直下に.htmlとしてコンパイルします。
3行目の{pretty: true}はコンパイル時のオプションで通常のインデントされたHTML記述になるようにしています。

最後にwatch処理です。

これで、CLIでgulpと入力するとwacth処理が開始され、ファイル変更時に自動コンパイルがされるようになります。
終了時はCtrl+cで解除されます。

このエントリーをはてなブックマークに追加

にほんブログ村 IT技術ブログ IT技術メモへ

コメントを残す

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