이 포스트에서는 Gulp를 사용하여 자바스크립트 파일에 Rollup을 적용하는 방법을 알아보겠습니다.

Rollup이란?

Rollup은 자바스크립트 프로젝트를 번들링하는 도구입니다. Rollup은 ES6 모듈 문법을 사용하여 필요한 코드만 번들로 패키지하고 결과물을 최적화합니다.

Gulp와 Rollup을 설치하기

먼저, Gulp와 Rollup을 설치해야 합니다. 다음 명령어를 사용하여 설치합니다.

npm install gulp rollup --save-dev

Gulp 태스크 생성

다음으로, Gulp 태스크를 생성해야 합니다. Gulpfile.js 파일을 생성하고 다음과 같이 작성합니다.

const gulp = require('gulp');
const rollup = require('rollup');

gulp.task('bundle-js', async function() {
  const inputOptions = {
    input: 'src/main.js', // 번들링할 자바스크립트 파일 경로
    plugins: [] // 필요한 Rollup 플러그인 추가
  };

  const outputOptions = {
    file: 'dist/bundle.js', // 번들링 결과물 파일 경로
    format: 'umd', // 결과물 포맷 (여기서는 UMD 형식으로 설정)
    name: 'MyBundle' // 결과물의 전역 이름 (UMD 형식에서 필요)
  };

  const bundle = await rollup.rollup(inputOptions);
  await bundle.write(outputOptions);
});

gulp.task('default', gulp.series('bundle-js'));

위 코드는 bundle-js라는 Gulp 태스크를 생성합니다. 이 태스크는 Rollup을 사용하여 src/main.js 파일을 번들링하여 dist/bundle.js 파일로 결과물을 출력합니다. 결과물은 UMD 형식으로 설정되어 전역 변수로 사용할 수 있도록 이름이 지정됩니다.

Gulp 실행

Gulp를 실행하여 자바스크립트 파일에 Rollup을 적용해봅시다. 다음 명령어를 사용합니다.

gulp

위 명령어를 실행하면 Gulp가 실행되고 bundle-js 태스크가 실행됩니다. src/main.js 파일이 번들링되어 dist/bundle.js 파일이 생성됩니다.

이제 dist/bundle.js 파일을 HTML 파일에 연결하면 번들링된 자바스크립트 파일을 사용할 수 있습니다.

마무리

위의 방법을 사용하면 Gulp를 통해 자바스크립트 파일에 Rollup을 적용할 수 있습니다. 이를 통해 코드의 크기를 줄이고 성능을 향상시킬 수 있습니다.

더 자세한 내용은 Rollup 공식 문서를 참고하시기 바랍니다.