Gulp는 웹 개발 작업을 자동화하기 위한 자바스크립트 빌드 도구입니다. 이를 사용하여 자바스크립트 파일의 브라우저 호환성을 관리할 수 있습니다. 자바스크립트 파일을 특정 버전의 브라우저에서 실행될 수 있는 형식으로 변환하고, 필요한 폴리필을 적용하는 과정을 자동화할 수 있습니다.

필요한 패키지 설치하기

먼저 Gulp를 사용하기 위해 필요한 패키지를 설치해야 합니다. 이를 위해 프로젝트 폴더에서 다음 명령어를 실행하세요:

npm install --save-dev gulp gulp-babel @babel/core @babel/preset-env

• gulp: Gulp 자체를 사용하기 위한 패키지
• gulp-babel: Gulp에서 Babel을 사용하기 위한 패키지
• @babel/core: Babel의 핵심 패키지
• @babel/preset-env: Babel의 브라우저 호환성에 관련된 preset 패키지

Gulp 설정 파일 작성하기

프로젝트 폴더에 gulpfile.js라는 이름의 파일을 생성하고 다음 내용을 작성하세요:

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('babel', () => {
  return gulp.src('src/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.series('babel'));

위 코드에서 babel task는 src 폴더 내의 자바스크립트 파일을 선택하고, Babel을 사용하여 컴파일한 후 dist 폴더에 저장합니다.

브라우저 호환성 설정하기

Babel의 @babel/preset-env preset을 사용하여 특정 버전 이상의 브라우저에서 실행될 수 있는 형식으로 자바스크립트 파일을 변환할 수 있습니다. .babelrc 파일을 생성하고 다음 내용을 추가하세요:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

위 설정은 브라우저에서 전혀 지원되지 않는 메서드와 속성을 지원하기 위해 필요한 폴리필을 자동으로 적용합니다.

Gulp 실행하기

Gulp를 실행하기 위해 프로젝트 폴더에서 다음 명령어를 실행하세요:

gulp

위 명령어를 실행하면 src 폴더 내의 모든 자바스크립트 파일이 Babel을 통해 컴파일되고, dist 폴더에 저장됩니다.

참고 자료

• Gulp 공식 사이트: https://gulpjs.com/
• Babel 공식 사이트: https://babeljs.io/
• @babel/preset-env 문서: https://babeljs.io/docs/en/babel-preset-env