Posted at

Gulp導入手順

More than 5 years have passed since last update.


node.jsのインストール

node.jsにて開発されているので、まだインストールしていない場合はインストールが必要です。

node.js


gulpのインストール(グローバル)

コマンドラインにて作業を進めます。

sudo npm install -g gulp

※npmバージョンが古いとエラーが出る場合があるようなので最新にしておきましょう

sudo npm install -g npm

gulpがインストールできたか確認のためバージョン情報を見てみます。

gulp -v

下記のようになっていればOKです。

※ここではまだLocal version undefinedで問題ないです

CLI version 3.8.7

Local version undefined


試用

とりあえず使えるか試してみます。

まずは、プロジェクトフォルダに移動してください。


package.json作成

Gruntと同様、package.jsonを作成します。

npm init

下記のような対話形式で進んでいくので必要部分だけ入力します。

name: (gulp)

version: (0.0.0)
description:
entry point: (gulpfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/username/gulp_project_foldar/package.json:

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

Is this ok? (yes)


gulpのインストール(ローカル)

gulpはグローバルだけでなくローカル(プロジェクト毎)にもインストールする必要があります。

そのあたりの話は、gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"あたりに書いてあるので興味が有る場合は参考にするといいかと思います。

下記を実行します。

sudo npm install gulp --save-dev

ここでまたバージョンを確認すると、下記のようにローカルバージョンも反映されているかと思います。

gulp -v

CLI version 3.8.7
Local version 3.8.7


Hello World!してみる

簡易な動作確認として、ここでは「Hello World!」のみしてみます。


gulpfile.jsの作成

gulpfile.jsは、gulpのタスクを定義するファイルになります。

GruntでいうGruntfile.jsにあたります。

gulpfile.jsを作成して、Hello World用に下記のコードを記入して保存します。

var gulp = require('gulp');

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


gulp実行

「gulp タスク名」で実行できますので、

gulp default

もしくは

gulp

にで実行できます。

※defaultタスクの場合は、gulpだけでも実行されます

コマンドライン上に、「Hello Gulp!!」が表示されたら成功です。

※参考サイト

タスクランナーgulp入門 to-R