【Gulp】Sass를 감시·컴파일한 타이밍에 채팅 워크에 메시지를 보낸다

평상시는 프런트 엔드의 태스크 러너에 「grunt」를 사용하고 있습니다만, 「gulp」가 좋다고 하는 소리를 최근 잘 듣기 때문에 시험해 보았습니다. 둘 다 Node.js에서 작동하기 때문에 개인적인 감각에서는 그 도입 절차에 큰 차이는 없지만 일단 기록해 둡니다.

sass 컴파일 작업 실행 후 채팅 작업에 메시지를 보내려고합니다. (트리거는 sass의 컴파일이 아니어도 됩니다만)

준비

프로젝트의 작업 디렉토리로 이동하여 결정된 명령

npm init

그런 다음 gulp 설치

npm install gulp --save-dev

플러그인 설치

이번에는 Sass의 컴파일이므로 "gulp-sass"라는 플러그인과 채팅 워크 전송용으로 "request"라는 플러그인을 설치합니다.

· gulp-sass
· 요청

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 파일을 변경하고 잘하면



채팅 작업으로 확인

빠진 포인트

일반적으로 파일 감시하는 분에는 다음과 같은 느낌으로 좋지만 텍스트 편집기에 따라 저장할 때 작업 러너의 로그를 보면 두 번 달리는 경우가 발생합니다. (Sublime Text를 사용했습니다)

gulp.task('watch', function(){
  gulp.watch('sass/*.scss',['chatwork','sass']);
});

같은 메시지가 두 번 채팅 워크로 전송되어 버리면 곤란하기 때문에 연속 실행을 억제합니다.

자세한 것은 이쪽
ぃ tp // m / g g와 m / ms / c6d821d72664f90f1 11

두 번째 인수에 gaze 옵션을 전달합니다.
재실행을 10초 동안 억제하려면 다음과 같이 옵션을 지정합니다.

gulp.task('watch', function(){
  var gaze_opt = {
    debounceDelay: 10000
  };
  gulp.watch('sass/*.scss',gaze_opt,['chatwork','sass']);
});

발전

없어요.

이번에 만든 샘플은 여기