案外難しくない！gulpのインストール方法 for Mac

難しい！エラーが出る！とか思ってたgulpのインストールですが、よくよくエラー見てみたらプロキシの問題でした。
gulpのインストールさくっと思ってたより簡単にできたので、拍子抜けしたなんてこともありましたが、まとめておきます。

まず根本的にgulpってなに？

gulpを使えばさまざまな作業を自動化することができます。
そんなgulpはタスクランナーで....はなくストリーミングビルドシステムです。
わたしもタスクランナーだと前思っていましたが、以前勉強会でハムさんがおっしゃっていました。

タスクランナーとストリーミングビルドシステムの違いは？

よく聞く【Grunt】はタスクランナーで、【gulp】はストリーミングビルドシステム。
だいたい同じなんでしょ？なんて思ったりしましたが、やる目的は同じでもアプローチが違うようです。

ファイルの処理をストリームで行うというところが大きな違いのようです。

まずはNode.jsのインストール

gulpはNode.jsをベースに動いているためまずはNode.jsをインストールします。
公式サイト(https://nodejs.org/en/)からインストーラーでインストールします。ここでよく見てみると【LTS】と【Current】とありますが、【LTS】はLong-term Supportの略で安定しているバージョンがいい場合はこちら。【Current】は最新バージョンで機能性的にはLTSよりも上をいきますが安定は保証できないものです。
特に理由がない場合はLTSでもこと足りるかと思います。

インストールできたら確認としてターミナルで

node -v

とコマンドを打ってバージョンがでればインストール無事完了です。

ここから本題のgulpのインストール

まずはグローバルにインストールしますターミナルで

sudo npm install -g gulp

次にローカルにインストール

sudo npm install --save-dev gulp

を入れて実行（Enter）。
無事インストールができていればさっき同様に

gulp -v

でバージョンがでるはずです。

package.jsonを作成する

package.jsonを作成するとgulpのインストールしたバージョンなどが記載されます。

npm init

いろいろ質問してくるかと思いますが、特に設定しない場合は全てEnterで大丈夫です。
作成したpackage.jsonはこんな感じ。※設定により中身は異なる可能性があります。※

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulpfile.js の作成

gulpfile.jsはgulpのタスクを記載するものです。このファイルに書いたタスクが実行されていきます。
試しに下記を書いて【gulpfile.js】という名前をつけてpackage.jsonがあるディレクトリと同じ場所に保存します。
これはコマンドラインに表示するだけのサンプルです。

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('test!');
});

ターミナルでgulpとうちEnterを押すと....

実行されてコマンドライン上に「test!」と表示されます。

あとがき

gulpの導入から実際にタスクを実行できるまでの環境構築までです。次はプラグインとかタスクの書き方とか.....。おまけにgulpをアンインストールしたかったら下記をうつとできるみたいです。

sudo npm uninstall -g gulp

わたしはちょっとローカルのgulpのバージョンがおかしくて何度かお世話になりました。