- Gulp 3.9.X와 4.X의 차이점
-
Gulp는 오랫동안 3.9 버전으로 사용됐는데 2018년 1월 4.0 버전으로 정식 릴리즈됐고,
2018년 말부터는 4.0 버전이 gulp@next에서 latest로 승격되어 기본 설치 버전으로 제공되고 있다.
물론 4.0 버전도 쉬운 기능으로 구성되지만, API가 달라졌기 때문에 기존 3.9 버전 기반의 빌드 환경은 오류가 날 수 있어서 주의해야 한다.
따라서 본 글에서 Gulp 4.0으로 전환하는 방법을 간략하게 정리하여 알아본다.
- Gulp 4.0의 변경사항
-
Gulp 4.0 예제는 보편적으로 ES6를 사용하기 때문에 아래에서는 var 대신 const, let으로 변수를 선언하며,
구조분해할당을 이용해서 Gulp의 각 함수를 사용한다.
- series(), parallel() 함수로 실행 순서 통제
-
Gulp 4.0 에서는 Task 실행 순서를 통제할 수 있는 API를 제공한다.
따라서 앞으로 run-sequence 모듈을 사용하지 않아도 된다.
parallel 함수는 Task를 병렬로 실행하는데 기존 gulp.task(‘build’, [‘html’, ‘css’]); 방식의 실행 순서에 대응된다.
const { parallel } = require('gulp');
function javascript(done) {
done();
}
function css(done) {
done();
}
exports.build = parallel(javascript, css);
series 함수는 Task를 순차적으로 실행한다.
각 Task는 종료 시점을 알기 위해 Promise, Stream 또는 아래와 같이 명시적으로 완료 콜백 함수를 호출해야 한다.
const { series, src, dest } = require('gulp');
function javascript(done) {
done();
}
function css() {
return src('src/css/*.css')
.pipe(dest('build/css'));
}
exports.build = series(javascript, css);
- Task 모듈 내보내기
-
Gulp 4.0부터는 Task함수를 사용하기보다 일반 기명함수로 Task를 만들고,
CommonJS 모듈 형식으로 내보내기를 권장한다.
const { series } = require('gulp');
function clean(done) {
done();
}
function build(done) {
done();
}
exports.build = build;
exports.default = series(clean, build);
- 빌드 속도 개선을 지원하는 LastRun() 함수, Incremental build를 위한 gulp.lastRun
-
Task가 성공적으로 완료된 시간을 검사하여 반복 빌드 시 변경된 파일만 처리하는 방식으로 성능을 향상한다.
watch가 적용된 Task에 유용하다. src 함수에 옵션을 추가하여 적용한다.
Incremental build 는 반복되는 빌드 속도를 개선하기 위한 최선의 방법 중 하나로 매 빌드마다 모든 파일을 처리하는 것이 아니라 변경된 파일에 대해서만 처리하는 것이다.
Gulp 3에서는 아래와 같이 gulp-cached 와 같은 플러그인을 활용해서 이를 구현했다.
gulp-cached 는 timestamp와 실제 컨텐츠를 모두 체크해서 변경된 파일만 스트림으로 흘러가게 한다.
const { src, dest, lastRun, watch } = require('gulp');
const imagemin = require('gulp-imagemin');
function images() {
return src('src/images/**/*.jpg', { since: lastRun(images) })
.pipe(imagemin())
.pipe(dest('build/img/'));
}
function watch() {
watch('src/images/**/*.jpg', images);
}
exports.watch = watch;
- Sourcemaps 기본 지원
-
이제 소스맵을 기본 지원하기 때문에 앞으로 gulp-sourcemaps 모듈을 사용하지 않아도 된다.
기본적으로 비활성되어 있으며 src 함수에 아래처럼 옵션을 추가하여 적용한다.
src('input/**/*.js', { sourcemaps: true })
.pipe(uglify())
.pipe(dest('output/', { sourcemaps: true }));
- 결론
-
새로 Gulp 빌드 환경을 구축할 때 바뀐 API에 당황해서 3.9 버전으로 다시 설치하는 경우가 많을 것이다.
그 때문에 기본설치 버전이 4.0으로 되기까지 시간이 걸린 것 같다.
이제는 최신 버전을 권장하고 있기 때문에 변경된 API들을 알아보고 기존 빌드 환경에 적용해봤다.
Gulp 4.0은 가독성과 유연성이 향상되고, 모듈화 측면에서 개선점이 돋보인다.
Task가 복잡해지면서 관리가 힘든 문제가 있었는데 이제 좀 더 깔끔하게 빌드 환경을 구축할 수 있게 됐다.
run-sequence, gulp-sourcemaps, gulp-watch 등 필수적이면서 외부 모듈에 의존해야했던 부분이 기본 지원되어 개선됐다.
초보자가 어떤 모듈을 조합해야 하는지 몰라서 겪을 시행착오가 조금 줄어들 것 같다.