普段はフロントエンドのタスクランナーに「grunt」を使ってますが、「gulp」の方が良いよーという声を最近良く聞くので試してみました。両方ともNode.jsで動作するので、個人的な感覚では、その導入手順に大きな違いは無いですが、一応記録しておきます。
sassのコンパイルのタスク実行後にチャットワークにメッセージを送るようにしています。（トリガーはsassのコンパイルじゃなくてもいいですが）
準備
プロジェクトの作業ディレクトリに移動してお決まりのコマンド
npm init
続いてgulpをインストール
npm install gulp --save-dev
プラグインのインストール
今回はSassのコンパイルなので「gulp-sass」というプラグインと、チャットワーク送信用に「request」というプラグインをインストールします。
npm install --save-dev gulp-sass request
ソース
gulpfile.jsを作成して
gulpfile.js
var gulp = require('gulp');
var sass = require("gulp-sass");
gulp.task('chatwork', function() {
var request = require('request');
var room_id = '<ルームID>';
var message = '<任意のメッセージ>';
var api_key = '<API_KEY>';
var options = {
url: 'https://api.chatwork.com/v1/rooms/'+room_id+'/messages',
headers: {'X-ChatWorkToken': api_key},
form: { body: message },
json: true
};
request.post(options, function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body);
}else{
console.log('error: '+ response.statusCode);
}
});
});
gulp.task("sass", function() {
gulp.src("sass/*scss")
.pipe(sass())
.pipe(gulp.dest("sass"));
});
gulp.task('watch', function(){
var gaze_opt = {
debounceDelay: 10000
};
gulp.watch('sass/*.scss',gaze_opt,['chatwork','sass']);
});
※scssファイルの中身と場所はお好きなように
タスクの実行
gulp watch
scssファイルに変更を加えて、うまくいけば
チャットワークで確認
ハマったポイント
通常、ファイル監視する分には、以下のような感じで良いのですが、テキストエディタによっては、保存する際にタスクランナーのログを見ると2度走るケースが発生します。(Sublime Textを使ってました)
gulp.task('watch', function(){
gulp.watch('sass/*.scss',['chatwork','sass']);
});
同じメッセージが二度、チャットワークに送信されてしまうと困るので、連続実行を抑止します。
詳しくはコチラ
http://qiita.com/cognitom/items/c6d821d72664f90f1e11
第二引数にgazeのオプションを渡します。
再実行されるのを10秒間抑制するために、次のようにオプションを指定します。
gulp.task('watch', function(){
var gaze_opt = {
debounceDelay: 10000
};
gulp.watch('sass/*.scss',gaze_opt,['chatwork','sass']);
});
発展
無いです。