読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

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を押してもおk
入力が終わったらディレクトリ直下に以下のような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には及ばないけどプラグインも色々あるみたいですし、少しずつ使っていってみます。

今回参考にしたサイト