Gulp는 자바스크립트 파일을 압축하는 도구로 많이 사용됩니다. 이번에는 Gulp를 사용하여 자바스크립트 파일을 압축하면서 파일명에 날짜 형식을 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치하기

먼저 Gulp를 사용하기 위해 다음의 패키지를 설치해야 합니다:

npm install gulp gulp-uglify gulp-rename --save-dev

• gulp: Gulp 자체 패키지
• gulp-uglify: 자바스크립트 파일을 압축하는 Gulp 플러그인
• gulp-rename: 파일 이름을 변경하는 Gulp 플러그인

Gulp 태스크 작성하기

다음은 gulpfile.js에 작성할 Gulp 태스크의 예입니다:

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const dateFormat = require('dateformat');

gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename(function(path) {
      path.basename += '-' + dateFormat(new Date(), 'yyyymmddHHMMss');
    }))
    .pipe(gulp.dest('dist/js'));
});

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

위의 예시 코드에서는 gulp 패키지를 불러오고, gulp-uglify와 gulp-rename을 사용하기 위해 해당 모듈을 불러옵니다. 그리고 dateFormat 함수를 사용하기 위해 dateformat 패키지도 불러옵니다.

그리고 scripts라는 이름의 Gulp 태스크를 작성했습니다. 이 태스크는 src/js 폴더에서 자바스크립트 파일을 선택하고, uglify 플러그인을 사용하여 압축한 다음, rename 플러그인을 사용하여 파일 이름에 현재 날짜를 추가합니다. 마지막으로 dist/js 폴더에 결과를 저장합니다.

마지막으로, default 태스크를 설정하여 scripts 태스크를 실행하는데, 이렇게 하면 gulp 명령을 실행했을 때 scripts 태스크가 실행됩니다.

Gulp 실행하기

이제 Gulp를 실행하여 자바스크립트 파일을 압축하면서 파일 이름에 날짜 형식을 추가할 수 있습니다.

gulp

위 명령을 실행하면 src/js 폴더에 있는 자바스크립트 파일들이 압축되고, dist/js 폴더에 압축된 파일들이 저장됩니다. 파일 이름은 file-날짜시간.js 형식으로 변경됩니다.

결론

Gulp를 사용하여 자바스크립트 파일을 압축하면서 파일 이름에 날짜 형식을 추가하는 방법에 대해 알아보았습니다. 이를 통해 손쉽게 자바스크립트 파일을 관리할 수 있습니다. 더 자세한 내용은 Gulp 공식 문서를 참고하세요.