成田(@nariyu)さんにお奨めされた Gulp 始めました。
圧倒的な Node.js の知識不足の中なんとか実践で使える感じになってきたので忘れないようにメモ。

Gulp.js

gulpjs.com
“Automate and enhance your workflow” だそうです。

gulp/docs/getting-started.md
gulp/docs/API.md

Gulp でしたいこと

• JavaScript を concat, minify, source map, JSDoc
• Compass で CSS 作成, source map, minify
• 画像ファイルを最適化
• リリースファイルの抽出

Gulp 開発環境準備

Sass / Compass

Sass, Compass をインストールあるいは最新状態か確認し必要ならアップデートします。

sudo gem update --system
sudo gem install compass

node install

Node.js をインストールする必要があります。
pkg をダウンロードしインストールします。
クリックでインストールできるのは便利。

インストール済みの場合は最新版か確認し必要ならアップデートします。
pkg ダブルクリックでインストールするのが楽でした。

npm をアップデート

画像ファイル最適化に使用する gulp-imagemin が npm 2系を要求するのでアップデートします。

sudo npm install -g npm

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

package.json （抜粋）

{
  "dependencies": {
      "del": "^1.1.1",
      "gulp": "^3.8.10",
      "gulp-cache": "^0.2.4",
      "gulp-bower-normalize": "^1.0.3",
      "gulp-changed": "^1.1.0",
      "gulp-cached": "^1.0.1",
      "gulp-imagemin": "^2.1.0",
      "gulp-concat": "^2.4.3",
      "gulp-minify-css": "^0.3.11",
      "gulp-plumber": "^0.6.6",
      "gulp-rename": "^1.2.0",
      "gulp-ruby-sass": "^0.7.1",
      "gulp-size": "^1.2.0",
      "gulp-shell": "^0.2.11",
      "gulp-uglify": "^1.0.2",
      "gulp-sourcemaps": "^1.3.0",
      "gulp-uglifyjs": "^0.5.0",
      "main-bower-files": "^2.4.1",
      "require-dir": "^0.1.0",
      "rimraf": "^2.2.8",
      "run-sequence": "^1.0.2"
    }
}

dependencies のプラグインを使用しています。
似たようなのがあるけど…

cd PACKAGE_JSON_DIR
sudo npm install

gulpfile.js

gulpfile.js へ task を記述します。

Google さんの web-starter-kit/gulpfile.js が参考になりました。
github: google/web-starter-kit/gulpfile.js

gulpfile スタイルガイド- v0.5.0 – Qiita も分かりやすく参考にしました。

gulp.task( 'TASK_NAME', function () {
 
  return gulp.src( SOURCE )
    .pipe( /* 処理 */ )
    .pipe( gulp.dest( OUTPUT_DIR ) );
} );

• pipe で処理を続ける。

• SOURCE は String か Array で指定する。
  ‘somefile’
  or
  [
  ‘somefile_1’,
  ‘somefile_2’
  ]

• .pipe( gulp.dest( OUTPUT_DIR ) ) の後にも .pipe 可能。

Compass

Compass .scss から .css 作成。

"use strict";
 
var gulp = require( 'gulp' );
 
var plumber = require( 'gulp-plumber' );
var sass = require( 'gulp-ruby-sass' );
var cached = require( 'gulp-cached' );
var changed = require('gulp-changed');
var size = require('gulp-size');
 
gulp.task( 'compass', function () {
 
  return gulp.src( 'PROJECT_DIR/**/*.scss' )
    .pipe( plumber() )
    .pipe( cached( 'sass' ) )
    //.pipe( changed( 'PROJECT_DIR', { extension: '.scss' } ) )
    .pipe( sass({
      compass: true,
      style: 'expanded'
    }))
    .pipe( gulp.dest( 'OUTPUT_DIR' ) )
    .pipe( size( { title: '*** compass ***' } ) );
} );

gulp-ruby-sass

gulp-ruby-sass を使用しました。
他に gulp-compass もあるようです。

gulp-ruby-sass は option へ　compass: true　することで Compass の使用が可能です。
config.rb は必須ではないようですが、sass, css ディレクトリは default の ‘sass’, ‘stylesheet’ になります。

config.rb を作成し gulpfile.js と同階層に置きました。

Compass を使わず Sass なら web-starter-kit が使ってる gulp-sass が高速でよろしいらしいです。

gulp-cached

gulp-cached
cache を使用し変更済み .scss ファイルだけをコンパイル対象にできる。

gulp-changed

gulp-changed
変更済みファイルを対象にできる…みたいだけど
option 設定をしくじってるかも。

gulp-plumber

gulp-plumber
watch 中の syntax error で watch が止まるのを回避するために使用する…ようなんだけど無くても止まらないようなんだけどなぁー

gulp-size

gulp-size
処理が終わったときに処理ファイルbyte数を出力してくれる。
処理確認のために入れてみた。

感想

task をイイ感じに作れると便利になるのになー
Node.js のお勉強が必要なようです。

update 2015-01-17
さっそく知識不足をさらけ出しました。

あの書き方だと gulp-changed は無用でした。

gulp-cached は変更済みファイルのみ抽出してくれますが、_(underscore)で始まる .scss を変更してもコンパイルされません。
う〜〜ん