1. HOME
  2. フロントエンド
  3. 案外難しくない!gulpのインストール方法 for Mac

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

フロントエンド

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

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

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

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

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

Gruntの場合、タスク=プラグインといった感じに、その単一のタスク(プラグイン)を実行させるのが主な役割です。単一のタスクをうまいこと組み合わせて実行することで、ビルドという大きい目標に辿り着くというアプローチです。

Code Grid より
gulpの場合、プラグインはあくまでも入力に対して処理を行うためのものです。gulpのタスクはGruntでいうところのビルドに近いものです。タスクの中でいろいろなプラグインを組み合わせることで、タスク=ビルドを行うといったアプローチを取っています。プラグインを容易に組み合わせられるので、柔軟なタスクを作成できるとともに、タスク同士の依存関係を極力減らすことが可能です。

Code Grid より

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

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

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



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


node -v

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


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のバージョンがおかしくて何度かお世話になりました。