개발자들 사이에서 Build Tool로 많이 사용되고 있는 Webpack과 Gulp다. . 코드를 Build를 할 때 단순히 명령어만 배운대로 치면 되었기 때문에 크게 신경을 쓰지 않았지만, 앞서 Webpack을 정리하면서 Gulp가 같이 떠올랐다. 확실히 두개의 차이를 정리하려고 한다.
Webpack 이란 ?
Webpack에 대해서는 앞선 글에 정리를 하였기 때문에 간단히 설명하려고 한다.
Webpack은 오픈 소스 Javascript 모듈 번들러이다. HTML 파일에 들어가는 Javascript 파일들을 하나의 자바스크립트 파일로 만들어준다. Webpack에서 제공하는 loader를 사용하면 JS 파일 뿐만 아니라, CSS, HTML, Image 등을 모듈로 로드해서 사용할 수 있다.
Gulp 란?
Gulp 는 웹 개발의 스트리밍 빌드 시스템, Node.js와 npm 기반의 Task Runner 이다. 반복 가능한 특정 작업을 자동화 하기 위해 사용한다. 작업은 .js 파일에 정의되고 작업 이름으로 작성된 명령으로 실행된다. 자동화는 모든 Javascript 파일, 정적 이미지의 축소 및 복사. 파일이 변경될 때 작업, bundle, 유닛 테스트 등의 작업을 수행할 수 있다고 한다.
npm으로 Gulp를 설치를 하면 gulpfile 파일을 확인할 수 있다. typescript를 사용한다면 .js를 .ts로 변경하여 사용하면 된다. 이 gulpfile안에 자동화 하기 위한 명령들을 정의하면 된다.
내 코드에서 gulpfile의 일부를 발취해보았다.
/**
* Build app for production.
* @name build
*/
gulp.task('build', done => {
runSequence(
'clean',
'build-src',
'build-config',
'build-copy',
'build-package',
done
);
});
/**
* Transpile typescript code of server.
* @name build-src
*/
gulp.task('build-src', () => {
const tsProject = ts.createProject('./tsconfig.json');
return gulp.src('./src/**/*.ts')
.pipe(replaceModulePaths())
.pipe(sourcemaps.init())
.pipe(tsProject()).js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist'));
});
/**
* Copy config file to deploy at Google App Engine.
* @name build-config
*/
gulp.task('build-config', () => {
return gulp.src([
// './.npmrc',
'./.gcloud/app.yaml'
]).pipe(gulp.dest('./dist'));
});
...
...build 명령을 하게되면 정의해놓은 순서대로 Task가 진행이 된다. 이처럼 Gulp는 정해놓은 이름으로 작성된 명령을 자동화 할 수 있는 Build Tool 이다.
Webpack vs Gulp
Webpack과 Gulp는 모두 Build Tool 이다. 두 Tool의 역할은 비슷하고, 어느 것을 선택할 지는 개발자의 자유이다. 그러기 위해서 두 Tool의 차이점을 알아야한다.
Webpack : Package.json의 script를 기반으로 동작하는 Package Bundler 이다.
Gulp: gulpfile 파일을 기반으로 실행하는 Task Runner 이다.
Webpack은 Javascript Bundle 위한 Package Bundler이고 목적은 종속성을 가진 어플리케이션 모듈을 정적인 소스들로 생산하는 것이고, Gulp는 Task Runner이며, Work Flow를 자동화 및 향상할 수 있는 도구이다. 반복되는 작업들이나 시간이 많이 들어가는 작업을 자동화하여 쉽게 처리할 수 있다. Webpack에 비하여 Learning Curve가 낮기 때문에 사용하기 쉬운 편이며, 코드에 대한 가독성이 좋다. 대신 Webpack과 같이 모든 모듈에 대한 종속성 관리가 이루어지지 않기에 규모가 큰 프로젝트에서 패키지화하기가 쉽지 않다고 한다.
두 Tool을 모두 사용하면 거의 모든 유형의 Work Flow를 처리할 수 있다고 한다. 사용성 측면에서 Gulp가 Webpack 보다 유연하고 작업을 정의하고 실행하는 것이 훨씬 쉽고, 반면에 Webpack의 구성 옵션은 훨씬 더 유연하고 빠르게 지속적으로 개발되고 있으며 커뮤니티 규모가 커져 Gulp보다 정보를 얻기가 쉽다 한다. 또한 Webpack은 대규모 프로젝트에, Gulp는 소규모 프로젝트에 어울리는 것 같다.
여러 사이트를 참고해보면 한결같이 어느 하나가 좋다고 할 수 없다고 얘기한다. Webpack이 있으면 Gulp는 필요없다라는 의견과, Webpack은 과하고 Gulp의 단순성이 좋다는 의견이 나뉜다고 한다.
결론은 개발자가 자신의 프로젝트에 어느 Build Tool이 잘 어울릴지 판단하여 적용하면 될 것 같다.
reference: https://buddy.works/blog/webpack-vs-gulp
reference: https://kdydesign.github.io/2017/07/27/webpack/
