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