Gulp + Babel - by. UXKM

2024-06-04

요약 설명

gulpfile.js 에 섹시한 최신 Javascript인 ECMAScript 2015 이상의 문법(이하 'ES6 문법')을 사용할 수 있는 기본 환경을 세팅합니다.

※ Babel의 자세한 설명은 [6.2. JS - Babel Support] 에서 자세하게 다룹니다.

2.5.1. Babel을 사용하면 좋은 점

Gulp와 Babel을 조합하여 사용하면 최신 기술을 활용하고 유연한 빌드 프로세스를 구성할 수 있습니다.
최신 JavaScript 기능을 활용하고 브라우저 호환성을 유지하며, 모듈 시스템을 활용하여 코드를 효율적으로 관리할 수 있습니다. 이는 개발 경험을 향상시키고 프로젝트의 유지보수성을 향상시킬 수 있습니다.

최신 JavaScript 기능 사용: Babel을 사용하면 최신 JavaScript (ES6/ESNext) 기능을 사용할 수 있습니다. 화살표 함수, 클래스, 비구조화 할당 등과 같은 향상된 문법을 사용하여 코드를 더 간결하고 가독성 있게 작성할 수 있습니다.
브라우저 호환성 향상: Babel을 통해 코드를 ES5로 변환하면, 다양한 브라우저 및 환경에서 호환성을 확보할 수 있습니다. 이는 최신 브라우저와 구형 브라우저 모두에서 애플리케이션이 동작하도록 하는 데 도움이 됩니다.
모듈 시스템 활용: Babel을 사용하면 ES6 모듈을 사용할 수 있습니다. 이는 코드를 모듈로 나누고 관리할 수 있게 해주며, 재사용성과 유지보수성을 향상시킵니다.
플러그인 및 프리셋 활용: Babel은 다양한 플러그인과 프리셋을 제공하며, 이를 사용하여 특정 기능을 확장하거나 프로젝트의 요구 사항에 맞게 설정할 수 있습니다. 예를 들어, 화살표 함수 변환, 클래스 속성 변환, 환경에 맞는 코드 변환을 수행할 수 있습니다.
개발 및 빌드 프로세스 향상: Gulp와 Babel을 함께 사용하면 코드 변환, 번들링, 압축, 린팅 등 다양한 작업을 자동화할 수 있습니다. 이를 통해 개발자는 효율적으로 작업하고 더 나은 빌드 프로세스를 설정할 수 있습니다.
향상된 디버깅: 최신 JavaScript 문법을 사용하면 코드를 더 이해하기 쉽게 만들 수 있습니다. Babel을 사용하여 변환하면 개발자들이 디버깅 시에 더욱 편리하게 작업할 수 있습니다.

2.5.2. gulpfile.js를 gulpfile.babel.js로 변경

Babel을 활용하기 위해 기존 gulpfile.js를 gulpfile.babel.js로 변경합니다.

gulpfile.babel.js로 변경 예시

2.5.3. .babelrc 파일 생성

_gulp_setting 폴더 하위로 .babelrc 파일을 생성하고 아래 코드를 적용합니다.

.babelrc은 Babel이라는 JavaScript 트랜스파일러의 설정 파일입니다.
.babelrc에 Babel의 구성을 정의하고, Babel이 코드 변환에 사용해야 할 플러그인 및 프리셋을 지정할 수 있습니다.

.babelrc 파일 생성

							{
								"presets": ["@babel/preset-env"]
							}

2.5.4. Babel 패키지 설치 및 테스트

정상적인 gulp dev 실행을 위해 Babel에 관련한 패키지(register, core, preset-env)를 설치해야 합니다.
최신 버전의 babel 설치를 위해 Babel 앞에 @를 붙여서 설치를 진행합니다.
터미널에서 아래 명령을 실행합니다.

패키지 설치가 완료되면 package.json의 devDependencies에 업데이트 됩니다.

							{
								"devDependencies": {
									"@babel/core": "^7.19.3",         // 추가됨
									"@babel/preset-env": "^7.19.4",   // 추가됨
									"@babel/register": "^7.18.9",     // 추가됨
			    				"gulp": "^4.0.2"  								// 기존에 설치한 gulp
								}
							}

터미널에서 gulp dev를 실행합니다.

gulp dev 테스트

gulp dev를 실행하여 위 이미지와 같은 결과가 나왔다면 Babel이 정상적으로 설치된 것입니다.
파란색 밑줄은 gulp가 Babel을 사용하고 있다는 의미입니다.

2.5.5. Gulp 기본설정 마무리

여기까지 Gulp의 기본 세팅이 완성되었습니다.
우리는 package.json을 생성하고 node.js를 설치하였으며 터미널에서 npm 이란 명령어를 이용해서 여러 패키지를 설치해 보았습니다.
많이 생소한 과정이지만, 여기까지 진행했던 기본 세팅을 삭제한 후 다시 설치하는 과정을 한두 번 더 반복해보면 금방 익숙해질 것입니다.

지금까지는 기본 세팅이라 실제 html, css를 코딩할 수 있는 단계까지는 아직 더 많은 패키지를 설치하고 gulpfile.babel.js를 세팅해야 합니다.
다음 과정도 지금까지의 과정과 크게 다르지 않기에 천천히 커리큘럼을 따라 하다 보면 완성되어 있는 Gulp를 만날 수 있습니다.

다음 단계부터는

html을 include 하여 반복되는 html 요소를 편리하게 관리하거나,
SCSS를 CSS로 컴파일 및 min으로 압축,
ES6 이상의 JavaScript 문법을 기존의 JavaScript 문법으로 트렌스파일 및 min으로 압축,
images를 무손실 압축,
local web server 작동 및 실시간 파일 감시 등을 설정하여

실제 퍼블리싱 작업에 필요한 여러 환경을 세팅하게 됩니다.