[AngularJS] gulp 버전 업그레이드 3 -> 4

회사 AngularJS 프로젝트를 node 10으로 migrate 하는 과정에서 배운 것들을 정리해보았다.

기존 셋업

AngularJS 1.4.x

node 6.x

gulp 3.9.x

요구사항

보안 상의 이유로 도커 이미지와 컨테이너는 node 10과 12만 사용 가능

문제

gulp 3.9.x는 node 10 사용 불가. gulp 4부터 사용 가능

gulp란?

간단히 자바의 컴파일러 개념이라고 볼 수 있겠다. 소스와 디펜던시 파일들을 내가 원하는 대로 합치고 index.html에 inject 할 수 있다.

마이그레이션 과정

syntax 변경

1. gulp.task에서 function 호출 하는 방법

gulp 3

gulp.task('buildScript', ['clean', 'build']);

gulp 4

// clean -> build 순서대로 실행
gulp.task('buildScript', gulp.series('clean', 'build'));
// clean과 build 동시에 실행
gulp.task('buildScript', gulp.parallel('clean', 'build'));

2. sync -> async

gulp 3

gulp.task('clean', () => {
    del([dist]);
});

위의 코드를 gulp 4에서 실행하면 다음의 에러 메세지를 보게 된다.

The following tasks did not complete: clean
Did you forget to signal async completion?

gulp 3에서는 synchronous 였던 function들이 gulp 4에서는 일반 자바스크립트처럼 asynchronous로 변경되었다. 이를 해결하기 위해선 여러 방법이 있는데 다음 두 가지 방법이 제일 쉬운 것 같다.

// 결과 리턴하기
gulp.task('clean', () => {
    return del([dist]);
});

// 리턴 타입이 스트림이나 Promise가 아니면 done callback 사용하기
gulp.task('clean', (done) => {
    del([dist]);
    done();
});

3. gulp-rev

gulp-rev 플러그인을 사용하면 파일 생성 시 파일 이름에 revision 넘버를 부여할 수 있게 된다. 하지만 정확한 원인은 모르겠으나 gulp 4에서 사용 시 build에는 문제가 없는데 browser-sync가 gulp-rev를 사용해 만든 파일을 찾지 못했다. 임시방편으로 크롬에서 Developer Tools -> Network 탭의 Disable cache를 체크해주거나 Command + Shift + R을 통해 hard refresh를 하면 제대로 로딩이 되는 것을 확인했지만 말 그대로 임시적인 방법이라 gulp-rev를 사용 안 하는 것으로 해결했다.

4. gulp-debug

gulp-rev 문제 때문에 알게 된 플러그인인데, 생성될 파일 이름을 콘솔에 찍어줌으로써 index.html에 inject 된 파일이 맞는 파일인지 확인 용도로 쓸 수 있다.

Fwantastic

Search This Blog