[javascript] Gulp를 사용하여 자바스크립트 파일에 캐시 무효화(Cache Busting)를 적용하는 방법

04 Dec 2023

javascript

캐시 무효화는 웹 애플리케이션에서 자바스크립트 파일이 수정될 때, 이전에 캐시된 버전이 아니라 새로운 파일로 업데이트되도록 강제하는 기술입니다. 이를 통해 사용자가 최신 버전의 자바스크립트 파일을 항상 받을 수 있게 됩니다. Gulp는 캐시 무효화를 손쉽게 구현할 수 있는 자바스크립트 빌드 도구입니다.

Gulp 설치하기

Gulp를 사용하려면 먼저 Node.js와 npm이 설치되어 있어야 합니다. 설치되어 있다면 다음 명령을 사용하여 Gulp를 전역으로 설치할 수 있습니다:

npm install gulp -g

Gulp 파일 작성하기

프로젝트 루트 폴더에 gulpfile.js라는 파일을 생성하고 다음의 코드를 작성합니다:

const gulp = require('gulp');
const rev = require('gulp-rev');
const revRewrite = require('gulp-rev-rewrite');

gulp.task('cache-busting', function() {
  return gulp.src('src/js/*.js')  // 자바스크립트 파일들의 경로를 지정합니다.
    .pipe(rev())  // 파일 이름 뒤에 해시 값을 추가하여 파일 이름을 변경합니다.
    .pipe(gulp.dest('dist/js'))  // 변경된 파일을 dist/js 폴더에 저장합니다.
    .pipe(rev.manifest())  // 파일 이름 변경 내역을 manifest 파일에 기록합니다.
    .pipe(gulp.dest('dist/js'));  // manifest 파일을 dist/js 폴더에 저장합니다.
});

gulp.task('update-html', function() {
  const manifest = gulp.src('dist/js/rev-manifest.json');  // manifest 파일을 읽어옵니다.
 
  return gulp.src('src/index.html')  // 수정되어야 할 HTML 파일의 경로를 지정합니다.
    .pipe(revRewrite({ manifest }))
    .pipe(gulp.dest('dist'));  // 업데이트된 HTML 파일을 dist 폴더에 저장합니다.
});

gulp.task('default', ['cache-busting', 'update-html']);

위의 코드는 Gulp를 통해 자바스크립트 파일에 캐시 무효화를 적용하기 위한 한 예입니다. gulp-rev와 gulp-rev-rewrite라는 플러그인을 사용하여 파일 이름을 변경하고, HTML 파일을 업데이트합니다.

Gulp 실행하기

터미널에서 프로젝트 루트 폴더로 이동한 뒤 다음 명령을 입력하여 Gulp를 실행합니다:

gulp

위의 명령을 실행하면 gulpfile.js에서 정의한 default 태스크가 실행되어 캐시 무효화가 적용된 자바스크립트 파일과 업데이트된 HTML 파일이 dist 폴더에 생성됩니다.

Gulp 설치하기

Gulp 파일 작성하기

Gulp 실행하기

참고 자료