タスクランナー「Gulp」で出来ること（＋インストール手順）

「Gulp」をご存じでしょうか？システム開発が便利になるので、まだ使っていない方は利用してみるのがオススメ。Gulpの特徴やインストール方法をまとめました。

Gulpとは？

Gulpは、タスクを自動化してくれるツールです。 http://gulpjs.com/ CSSやJavaScriptを圧縮したり、SASSやLESSをコンパイルしたり、ブラウザの再読込を自動で行ったり。Web系を中心に便利に開発を進められることができますね。タスクランナーとしてはGruntなんかも有名なんですが、いまではGulpが主流です。

Gulpをインストールする

それではGulpをインストールしていきましょう。Macでのインストールを前提に進めていきますね。

Node.jsをインストールする

Gulpを動かすには、Node.jsが必要です。まずはNode.jsをインストールしましょう。MacでHomebrewを使っている場合は、下記のコマンドでNode.jsがインストールできます。 $ brew install node 下記のコマンドで、Node.jsのバージョンが確認できます。インストールが正常に完了しているか、チェックしておきましょう。 $ node -v

gulp.jsをインストールする

それではGulpのインストールに入ります。下記のコマンドで、gulp.jsのインストールを行ってください。 $ npm install -g gulp

package.jsonを作成する

次は、プロジェクトフォルダの準備です。ファイル一式が保存されているフォルダにcdコマンドで移動したのち、下記のコマンドを実行してください。 $ npm init プロジェクトフォルダにpackage.jsonが作成されます。

gulpfile.jsを作成する

package.jsonと同じディレクトリに、gulpfile.jsを作成します。下記の1行をgulpfile.jsに記述してください。 var gulp = require("gulp"); これでGulpを使う準備が整いました。Gulpは個々の処理を実行するためのプラグインをインストールすることで、各機能が使えるようになります。

あとがき

導入は少し大変でしたが、一度使いはじめると便利で離れられなくなりますよ。プラグインごとの設定が必要な場合も多いのですが、ネットなどでたくさん情報が見つかります。ぜひ活用してみてください。