解 説


GulpとはNode.jsをベースにした開発ワークフローで苦労したり時間のかかるタスクを自動化するためのツールキットです。

Gulpでできること

  • Sassのコンパイル
  • コードの連結と圧縮
  • 画像の圧縮
  • CSSベンダープリフィックスの管理
    などなど

Gulpのインストール

Gulpのインストールはgulpのページを参照すると英語ながら書かれています。
基本的なインストール方法は「Node.js入門(1)環境づくりと少しだけ試してみる」の「Node.jsで開発するときの最初の手順〜初期設定」からの方法と同一な方法をとります。それはつまりGulpもNodeのパッケージだからです。

まずグローバルでインストールするには次のコマンドを使います。

グローバルインストールのコマンド

もし、エラーが出たら「sudo」をコマンドの先頭に付けます。

結果は以下のように表示されます。

注意:gulpまたはgulp-cliをglobalでインストールするのは必ずしも良策ではありません。globalでインストールをしておけばgulpの実行がどこからでも可能になりますが、作業フォルダにインストールしたgulpとバージョンが違うとトラブルになりかねません。作業フォルダにインストールするだけでもgulpは動きます。
グローバルにインストールしてない場合、gulpの実行は「gulp」コマンドだけでは動きません。
node_module/.binに移動してから実行します。

初期化

Gulp作業用ディレクトリを作成してカレントディレクトリを作成したディレクトリに移動します。今回のディレクトリ名は「gulp_lesson」としました。

初期化をすることでpackege.jsonを作成します。

ローカルへのインストール

次に作業用ディレクトリにもう一度Gulpをインストールします。

node_modulesフォルダができてpackage.jsonには次の内容が記述されています。

タスクの作成

タスクを自動処理するためのJavaScriptを記述して、ファイル名を「gulpfile.js」とします。
このファイル名はGulpの決まりごとです。

画像を圧縮して保存するタスク

タスクのJavaScriptの内容

変数gulpにモジュールをrequire()で読み込む。引数はgulpモジュールです。
また、require()でgulp-imageminプラグインを読み込みます。

gulpオブジェクトのtask()メソッドを使用してタスク処理を行うスクリプトを記述します。
第1引数が処理名、第2引数が処理の内容となります。

ファイルをコピーするタスクはgulp.src()で配列を引数に設定することで指定します。
assete/**/*はasseteフォルダ内のサブフォルダを含めてという意味です。
dest()はコピー先のディレクトリを指定します。
pipe()は連結するためのもので、imagemin()が圧縮操作を行います。

画像圧縮のプラグインの導入

画像を圧縮するにはさらにプラグインの導入が必要です。
GulpのプラグインはGulpのプラグインのページにまとまっています。

プラグインのページから「gulp-imagemin」をページ内検索などで探して、そのリンク先にある「gulp-imagemin」のページに行って使い方を確認します。

Install方法はプロジェクトフォルダにカレントディレクトリを移動していることを確認の上、下記コマンドをそのまま実行します。

packege.jsonに追記されている内容を確認します。

これでプラグインの導入完了しました。

タスクの実行は「gulp imagemin」で実行

SASSの導入

作業フォルダに移動して、gulp-sassのインストールを行います。コマンドは以下の通りです。

次に、作業フォルダ内にsassファイル用の「scssフォルダ」とcss用の「cssフォルダ」を作成します。
続いて、gulpfile.jsの作成です。
このファイルは、imageminで使用したものに追記して記述することが可能です。

実行するには以下のコマンドです。

また自動監視させるには以下のコマンドです。尚、自動監視させるにはgulpfile.jsに自動監視のタスクを作成する必要があります。

Gulpは多くのタスクを自動化するツールキットです。他にもたくさんの便利な機能があります。勉強を兼ねてそれぞれ試してみると良いでしょう。