Colin's Blog
[javascript] Gulp를 사용하여 자바스크립트 파일의 버전을 자동으로 관리하는 방법

Gulp는 자바스크립트 프로젝트의 작업 흐름을 자동화하는 도구이며, 프론트엔드 개발자들 사이에서 널리 사용됩니다. 이번 글에서는 Gulp를 사용하여 자바스크립트 파일의 버전을 자동으로 관리하는 방법에 대해 알아보겠습니다.

Gulp란?

Gulp는 Node.js 기반의 자바스크립트 빌드 도구로, 개발 작업을 자동화할 수 있도록 도와줍니다. Gulp는 플러그인의 조합을 통해 다양한 작업을 처리할 수 있습니다. 이번 예제에서는 Gulp의 gulp-rev 플러그인을 사용하여 자바스크립트 파일의 버전을 관리해보겠습니다.

Gulp 설치하기

먼저 Gulp를 설치해야 합니다. 프로젝트의 루트 디렉토리에서 아래 명령어를 실행하여 Gulp를 설치합니다.

npm install gulp -g

그리고 프로젝트의 package.json 파일이 있는 디렉토리에서 아래 명령어를 실행하여 Gulp의 로컬 패키지를 설치합니다.

npm install gulp --save-dev

Gulpfile.js 작성하기

Gulp를 사용하기 위해 Gulpfile.js 파일을 작성해야 합니다. 먼저 해당 파일을 프로젝트의 루트 디렉토리에 생성합니다.

그리고 아래 코드를 Gulpfile.js에 작성합니다.

const gulp = require('gulp');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');

gulp.task('versioning', function() {
  return gulp.src('src/js/*.js')
    .pipe(rev())
    .pipe(gulp.dest('dist/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/js'))
});

gulp.task('replace', function() {
  const manifest = gulp.src('dist/js/rev-manifest.json');

  return gulp.src('src/index.html')
    .pipe(revReplace({ manifest: manifest }))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.series('versioning', 'replace'));

위 코드는 Gulp를 사용하여 자바스크립트 파일의 버전을 관리하기 위한 작업들을 정의한 것입니다. src/js 디렉토리의 자바스크립트 파일들을 읽어와서 버전을 관리한 후 dist/js 디렉토리에 저장합니다. 그리고 src/index.html 파일에서 이 버전 정보를 사용하기 위해 rev-manifest.json 파일을 생성하고, 해당 파일을 사용하여 자바스크립트 파일의 경로를 변경합니다. 마지막으로 결과물은 dist 디렉토리에 저장됩니다.

Gulp 실행하기

Gulpfile.js를 작성한 후, 아래 명령을 실행하여 Gulp를 실행할 수 있습니다.

gulp

위 명령을 실행하면 Gulp는 default 작업을 실행하고, 자바스크립트 파일의 버전 관리 작업을 수행합니다. 결과물은 dist 디렉토리에 저장됩니다.

결론

이렇게 Gulp를 사용하여 자바스크립트 파일의 버전을 자동으로 관리할 수 있습니다. Gulp는 다양한 작업 흐름을 자동화할 수 있는 강력한 도구이므로, 프론트엔드 개발자에게 많은 도움이 될 것입니다.

참고 자료

© 2018 Colin. All rights reserved.