仕事で初めて使ってみて、便利だったので導入方法を書いてみます。
ちなみにQiitaも初書き。

Gulpとは

Node.js製タスクランナー

Sassのコンパイル
ブラウザのリロード
HTML、CSS、JavaScriptの最適化
画像の最適化
ローカルWebサーバー立ち上げ

などの作業をタスクに登録すると、
ファイルの更新タイミング等でタスクを自動実行してくれます。

gruntと似たものらしい（私はgruntを使った事がないですが)

メリット

設定ファイル(gulpfile.js)がGruntより記述しやすい
Gruntより速い
Gruntより後発で新しい感

デメリット

複雑なことは敷居がやや高め、javascript知識が多少は必要
ドキュメントが少ない（最近は増えてきた？

インストール手順

まず前提条件でNode.jsをインストールしておきます。

gulpをインストール

$ npm install -g gulp
$ gulp -v

エラーが出る場合sudoをつけて実行します。
バージョン情報が見れれば完了。

ローカルインストール

プロジェクト毎にインストールします。

ローカル用は１つのプロジェクト（フォルダ）に毎回入れます。

$ mkdir dev_gulp
$ cd dev_gulp
$ npm init

プロジェクトのフォルダを作成し、npm init を実行すると項目の入力を要求されます。

使うだけならとりあえずENTERで進めます。

入力が完了すると、package.json　ファイルができます。

$ npm install --save-dev gulp

--save-devをつけることによって、開発用のローカルインストールになります。

package.jsonと同じ階層に、gulpfile.jsを作成します。

$ touch gulpfile.js

あとはプラグインをインストールして、gulpfile.jsにタスクを書いていきます。

プラグインをインストール

ここではsassのコンパイルプラグインを入れて、gulpでsassコンパイルをしてみます。

フォルダ構成
gullpfile.jsの同階層にappフォルダ、その配下を作成

gulpfile.js
app  
├index.html  
├css  
└sass  
　└common.scss

scssファイルを作成
common.scss

h1{
  font-size: 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #ccc;
}
p{
  font-size: 12px;
  padding: 0;
}

gulp−sassをインストール

$ npm install --save-dev gulp-sass

インストール完了し、nodemodulesフォルダ配下にgulp−sassフォルダができたら、gulpfile.jsにタスクを書いていきます。

gulpfile.js

//gulp
var gulp = require('gulp');
//gulp-sass
var sass = require('gulp-sass');

//SASSビルドタスク
gulp.task('sass', function(){
    //scssディレクトリの指定
    gulp.src('app/sass/*.scss')

    //.pipeで処理実行
    //出力形式の種類　#nested, compact, compressed, expanded.
    .pipe(sass({style : 'expanded'})) 

    //出力先(gulp.dest)の指定
    .pipe(gulp.dest('app/css'));
});

’sass’という名前のsassコンパイルを行うタスクを作りました。
gulp sass コマンドで実行してみます。

$ gulp sass
〜
[16:52:21] Starting 'sass'...
[16:52:21] Finished 'sass' after 9.66 ms

上記のようにFinishedと出れば無事完了。
cssフォルダ内にコンパイルされたcssが吐き出されます。

その他のプラグイン

gulp-autoprefixer cssのベンダープレフィックスを自動付与
gulp-webserver ローカルwebサーバーを起動
gulp-plumber gulp watch中にエラーが発生してもgulpを終了させない
browser-sync ブラウザ同期、スマホでも開発環境のチェック可能になる
gulp-minify-css　cssをミニファイしてくれる
gulp-watch 監視タスクより後に作成したファイルも監視できる

環境を配布・共有

開発者それぞれが環境を用意したのでは非常に手間ですので、ここまでにやった設定を配布・共有してみます。

やりかたは簡単でgulpfile.js、package.jsonの２つを共有するだけです。

環境構築したいPCで、同じようにフォルダを設置して以下を実行するだけ。
（node.js、gulpのインストールは行っておく）

$ npm　install

これはプラグインを最初にインストールした時に、package.jsonにプラグイン情報が残るからです。

  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4"
  }

こんな風に。この情報から自動で必要なものがインストールされます。

gulpは個人的にも利用していきたいので、
今後もプラグインについて書いていく予定。

Gulpを導入してみる