Web制作の効率を上げるのに便利な「Gulp」について書いています。前回はGulpのインストール方法について書きましたので、まだインストールしていない場合は、以下のページをご参考ください。

Gulpのインストールができたら、次は実際にGulpを使ってタスクを動かしてみましょう。シンプルなサンプルを交えて書きましたので「Gulpのタスクについて初歩的なところから知りたい」という方など、興味がありましたらご参考ください。

作業フォルダにgulpをインストールしよう

Gulpをインストールする際にも書いたのですが、グローバルにインストールするgulp-cliと、Gulpを使いたいフォルダにgulpをインストールする必要があります。（「Gulp」「gulp-cli」「gulp」。似たような文字が並んですごくまぎらわしいですね）グローバルにインストールする方法はこちらに書いてありますので、gulp-cliのインストールは済んでいるものとします。

フォルダ別にWeb制作環境を複数持っている場合は、それぞれフォルダごとにgulpをインストールすることもあります。（グローバルにインストールするgulp-cliは一度でOKです。いずれ図説したいです・・・）

このことを踏まえて、今回は例としてデスクトップにある「htdocs」というフォルダ（以降、作業フォルダ）にgulpをインストールします。

まずWindowsの場合はコマンドプロンプト、Macの場合はターミナルを立ち上げて、cdコマンドで作業フォルダまで移動して以下のコマンドを実行しましょう。（以降、Macをご使用の場合は「sudo」を付けてコマンドを実行しましょう）

npm install --save-dev gulp

gulpをインストールをすると、最後に下のような警告が表示されることがあります。

npm WARN ENOENT ENOENT: no such file or directory, open 'C:\Users\imamura\package.json'
npm WARN EPACKAGEJSON imamura No description
npm WARN EPACKAGEJSON imamura No repository field.
npm WARN EPACKAGEJSON imamura No README data
npm WARN EPACKAGEJSON imamura No license field.

この表示は「package.json」が見つからないよ、というものです。Gulpを使うためには「package.json」というファイルが必要です。（package.jsonがすでに作業フォルダ内にある場合は、上記のような警告が出なかったり、表示項目が少ないこともあります）

というわけで「package.json」を作成しましょう。

package.jsonを作成しよう

package.jsonは作業フォルダ内に作成します。コマンドプロンプト（ターミナル）を起動して、以下のコマンドを実行して作成しましょう。

npm init

コマンドを実行するとずらずらっと文字が表示されてpackage.jsonファイルの情報について入力を促されます。入力を行う項目を以下のように一覧にしました。

どんな情報を入力すればいいの？

作業フォルダ内で作ったものを公開する目的なら上記の内容は少し考えないといけないと思いますが、これからGulpを始める方や、そもそも公開する必要がないと判断している方や「とりあえず早くタスクを動かしてみたい」という方は、今はここであまり深く悩まない方がいいと思います。（必要になった時にまた勉強すればいいんじゃないかという意味です）すべてエンターキーを押してスキップしてしまってもOKです。

この時点でpackage.jsonについて深く知りたい方は「npm package.json 日本語版 取扱説明書」をご参考ください。

いずれにしても、入力が完了するとpackage.jsonファイルが作業フォルダ内に作成されます。

ここまでできれば、次はタスクの内容を書くためのファイルgulpfile.jsを作成します。

シンプルなタスクを作成しよう

タスク、タスクって言ってるけど「タスクってそもそもなんなの？」と思ったことはありませんか。私はあります。

巷では、タスクとは「課せられた『仕事』や『処理』」という意味で解説されていることが多いです。「『この仕事（処理）お願いね』と任されたもの」だと理解すればいいと思います。

・・・タスクがどういうものかを実感するためには、いきなり大きなことをするのではなく「小さく始める」とイメージが掴みやすいです。

テキストエディターを起動して下のコードを追加しましょう。そして「gulpfile.js」というファイル名で保存してください。

var gulp = require('gulp'); //Gulpを呼び出す
gulp.task('default', function() {
 // ここにタスクを書きます
 console.log('タスク実行！'); //「タスク実行！」とコンソール（コマンドプロンプト）に表示する
});

「タスク実行！」という文字をコンソール（コマンドプロンプトまたはターミナル）に表示するためのコードです。gulpfile.jsを作成したら、いよいよGulpを使ってタスクを動かしてみましょう。

Gulpを使ってタスクを動かそう

タスクを動かすには以下のコマンドでできます。すごくシンプルなコマンドですね。コマンドプロンプト（ターミナル）を起動してコマンドを実行しましょう。

gulp

「タスク実行！」という文字がコマンドプロンプト（ターミナル）に表示されれば成功です。タスクが動きました。

まとめ

シンプルなタスクを動かす方法について書きました。

今回作業フォルダ内に作成したファイルは、下の画像にあるように「package.json」「gulpfile.js」の2つです。

私はGulpを使いはじめた当初、このかたちを基本として理解することで「なんとなくGulpの使い方がわかり始めてきた！」となりましたね～。

基本が理解できれば、今後は実務などで使えるように応用してタスクを作っていくことになると思います。その辺についても少しずつまとめていきますので、もし興味がありましたらまた読みに来てください。