gulp始めました
最近gulpという単語をよく目にするようになりました。
gulpとは何ぞや？と思い調べてみると、Gruntと同じようなタスクランナーらしいです。
Gruntよりタスクが書きやすい/見やすいとこと。
とりあえず使ってみようということで導入してみました。
その際のメモを記述しておきます。
glupのインストール
黒い画面を開いて以下のコマンドを入力
sudo npm install -g glup
glupのインストール時にエラーが出る場合は、npmのバージョンが古い可能性がある。
その場合は以下のコマンドを入力してnpmのバージョンを最新のものにしてください。
sudo npm install -g npm
インストールが完了したらバージョンを確認してみます。
バージョンが表示されればインストール完了です。
glup -v [glup] CLI version 3.8.6 [glup] Local version undefined
Localのバージョンがundefinedになっているのはここでは問題ありません。
package.jsonの作成
glupを使用したいディレクトリに移動し、package.jsonを作成します。
ここらへんはGruntと同じですね。
npm init
設定内容を対話形式で作成していく。
入力せずに全てEnterを押してもおｋ
入力が終わったらディレクトリ直下に以下のようなpackage.jsonが出来上がってる
{
"name": "140728_gulptest",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
ここで、このプロジェクトでglupを使用するにはプロジェクトディレクトリのルートにもglupをインストールしなければいけません。
黒い画面で以下のコマンドを入力します。
sudo npm install glup --save-dev
インストールが完了したらバージョンを調べてみます。
glup -v [glup] CLI version 3.8.6 [glup] Local version 3.8.6
LocalのバージョンがCLIのバージョンと同じになっていればインストール完了です。
glupfile.jsを作成する
glupのインストールが完了したら、実行したいglupのタスクを定義していきます。
その定義ファイルがglupfile.jsになります。
GruntでいうGruntfile.jsですね。
例として"Hello Gulp!!"と出力するglupfile.jsを作成します。
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello Gulp!!');
});
glupfile.jsを保存します。
gulpを実行する
黒い画面にてgulpを実行します。
実行には「gulp タスク名」を入力します。
gulp default
以下のようなメッセージが出力されます。
[gulp] Using gulpfile ~/hoge/gulpfile.js [gulp] Starting 'default'... Hello Gulp!! [gulp] Finished 'default' after 78 μs
タスク「default」が実行されました。
因みに「default」というタスクは「gulp」と入力するだけでも実行することが出来ます。
とりあえず今回は導入からdefaultタスクの実行まで。
Gruntには及ばないけどプラグインも色々あるみたいですし、少しずつ使っていってみます。
