gulp의 비동기 처리 방법

비동기 처리

Node.js는 다양한 방식으로 비동기성 처리를 한다. 가장 일반적인 패턴은 error-first callbacks{:target="_blank"}이지만, streams{:target="_blank"}, promises{:target="_blank"}, event emitters{:target="_blank"}, child processes{:target="_blank"}, observables{:target="_blank"} 등도 있다. Node.js를 기반으로 하는 gulp에서도 이러한 비동기성 처리를 사용한다.

Task 완료 시그널

gulp에서는 series() 또는 parallel() 메서드를 사용하여 Tasks를 순차 또는 병렬로 실행이 가능하다. 이를 위하여 각 Task의 실행이 완료되면 gulp에 완료되었다는 신호를 보내야 하며, 완료 신호를 보내는 방법은 다음과 같다.

stream 반환

gulp를 사용하면서 가장 많이 사용하는 방법이다.

const { src, dest } = require("gulp");

function streamTask() {
    return src("*.js").pipe(dest("output"));
}

exports.default = streamTask;

promise 반환

gulp를 사용하면서 가장 많이 사용하는 방법인 것 같다.

function promiseTask() {
    return Promise.resolve("the value is ignored");
}

exports.default = promiseTask;

event emitter 반환

const { EventEmitter } = require("events");

function eventEmitterTask() {
    const emitter = new EventEmitter();
    // Emit has to happen async otherwise gulp isn't listening yet
    setTimeout(() => emitter.emit("finish"), 250);
    return emitter;
}

exports.default = eventEmitterTask;

child process 반환

const { exec } = require("child_process");

function childProcessTask() {
    return exec("date");
}

exports.default = childProcessTask;

observable 반환

const { Observable } = require("rxjs");

function observableTask() {
    return Observable.of(1, 2, 3);
}

exports.default = observableTask;

error-first callback 사용

Task에서 아무 것도 return 되지 않으면 error-first callback을 사용하여 완료 신호를 보면 된다. callback은 아래 예제와 같이 task에 인수로 전달된다.

function callbackTask(cb) {
    // `cb()` should be called by some async work
    cb();
}

exports.default = callbackTask;

Task에서 오류가 발생한 경우 gulp에 알리려면 오류를 error-first callback의 인수로 사용하여 호출한다.

function callbackError(cb) {
    // `cb()` should be called by some async work
    cb(new Error("kaboom"));
}

exports.default = callbackError;

이 callback은 직접 호출하는 대신 다른 API에 전달하여 해당 API에서 에러가 발생 할 경우 호출되도록 할 수 있다.

const fs = require("fs");

function passingCallback(cb) {
    fs.access("gulpfile.js", cb);
}

exports.default = passingCallback;

gulp의 모든 Tasks는 비동기

gulp에서는 동기 작업은 더 이상 지원되지 않는다. 만약 "Did you forget to signal async completion?" 경고 메시지가 나오면, 비동기완료 신호를 넣지 않은 것이다. 문제를 해결하려면 위에서 언급한 방법중 하나를 사용해야 한다.

async/await 사용하기

async/await를 사용하여 비동기 함수로 Task를 정의할 수 있다. 이를 통해 await와 다른 synchronous code를 사용하여 Task 내에서 동기적으로 실행이 되도록 한다.

const fs = require("fs");

async function asyncAwaitTask() {
    const { version } = JSON.parse(fs.readFileSync("package.json", "utf8"));
    console.log(version);
    await Promise.resolve("some result");
}

exports.default = asyncAwaitTask;