Gulp는 자바스크립트 개발을 보다 간편하게 해주는 도구입니다. 이번 글에서는 Gulp를 사용하여 자바스크립트 파일에 버전을 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치하기

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

npm install gulp gulp-rev-append --save-dev

위 명령을 실행하면 gulp와 gulp-rev-append 패키지가 설치됩니다.

Gulpfile.js 생성하기

프로젝트 폴더에 Gulpfile.js라는 이름의 파일을 생성합니다. 그리고 아래의 코드를 입력합니다.

const gulp = require('gulp');
const revAppend = require('gulp-rev-append');

gulp.task('addVersion', function() {
  return gulp.src('path/to/your/js/*.js')
    .pipe(revAppend())
    .pipe(gulp.dest('path/to/your/destination'));
});

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

위 코드에서 path/to/your/js는 버전을 추가하려는 자바스크립트 파일이 위치한 폴더 경로로 변경해야 합니다. 또한 path/to/your/destination은 버전이 추가된 자바스크립트 파일을 저장할 경로로 변경해야 합니다.

Gulp 실행하기

Gulpfile.js가 준비되었다면, 다음 명령을 실행하여 Gulp를 실행합니다.

npx gulp

위 명령을 실행하면 Gulp는 addVersion 태스크를 실행하고 자바스크립트 파일에 버전이 추가된 파일을 생성합니다. 이 파일은 path/to/your/destination에 저장됩니다.

결과 확인하기

path/to/your/destination에 생성된 자바스크립트 파일을 열어보면, 파일의 맨 뒤에 물음표와 함께 버전이 추가된 것을 확인할 수 있습니다. 예를 들어, <script src="your-script.js?ver=1.0.0"></script>와 같은 형식입니다.

이렇게 자바스크립트 파일에 버전을 추가함으로써 브라우저에서 캐싱을 용이하게 할 수 있으며, 파일의 캐시가 갱신되었음을 알려주기 위한 유용한 기능입니다.

결론

이번 글에서는 Gulp를 사용하여 자바스크립트 파일에 버전을 추가하는 방법에 대해 알아보았습니다. Gulp를 사용하면 자바스크립트 개발 경험을 보다 간편하게 만들 수 있습니다. 많은 프로젝트에서 Gulp를 활용하여 자바스크립트 파일을 관리해보세요.

참고 자료:

• Gulp 공식 사이트
• Gulp-rev-append 패키지