Gulp으로 개발 작업을 하다 보면 다음과 같은 오류 메시지를 마주하게 될 때가 있습니다.
The following tasks did not complete... Did you forget to signal async completion?오류의 원인
이 오류는 Gulp 4에서 모든 태스크(task)가 자동으로 비동기(asynchronous) 방식으로 처리되기 때문에 발생합니다.
동기(synchronous) 함수는 하나가 완료된 후에야 다음 함수가 실행되며, 각 함수는 반드시 이전 함수의 작업이 끝나기를 기다려야 합니다. 반면 비동기 함수는 이전 함수의 결과를 기다리는 동안에도 실행을 시작할 수 있습니다.
이러한 방식은 프로세스가 차단(blocking)되지 않아 훨씬 효율적입니다. 하지만 함수가 정확히 언제 완료되었는지 파악하려면, 함수가 자신의 작업이 끝났음을 알리는 명시적인 완료 신호를 반환해야 합니다. 다행히 src()나 dest()처럼 대부분의 Gulp 태스크는 Node 스트림(stream)을 반환하기 때문에 별도로 신경 쓸 필요가 없습니다.
그러나 스트림을 반환하지 않는 커스텀 함수를 직접 작성한 경우라면 이야기가 다릅니다. 이럴 때는 함수 마지막에 콜백(callback) 함수를 호출해 완료를 알려줘야 하며, 그렇지 않으면 위와 같은 오류 메시지가 출력됩니다.
해결 방법: 콜백 함수 추가하기
오류를 해결하려면 아래 예제처럼 콜백 함수를 추가하면 됩니다:
function helloWorld(cb){
console.log('Hellooooo world!');
cb();
}
helloWorld 함수를 살펴보면, 매개변수로 선언한 cb 콜백 함수를 함수 마지막에서 호출하고 있습니다. 이렇게 하면 Gulp에게 비동기 작업이 완료되었다는 신호가 전달되어 오류가 사라집니다.
참고: 콜백 외의 대안
콜백 함수 외에도 Promise를 반환하거나 async 키워드를 활용하는 방법으로도 비동기 완료를 알릴 수 있습니다:
async function helloWorld() {
console.log('Hellooooo world!');
}
async 함수는 자동으로 Promise를 반환하기 때문에, Gulp가 작업 완료 시점을 인식할 수 있습니다. 상황에 맞는 방식을 선택해 사용하면 됩니다.
Gulp 환경 설정에 대해 더 깊이 있는 내용을 배우고 싶다면, 초보자를 위해 준비된 강좌 'Gulp 4 for Beginners'를 확인해 보세요!