먼저, Grunt를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 Grunt를 전역으로 설치합니다.

npm install -g grunt-cli

그런 다음, 프로젝트 디렉토리로 이동하여 프로젝트에 Grunt를 추가합니다. 터미널에서 다음 명령어를 실행합니다.

npm init
npm install grunt --save-dev

이제 Gruntfile.js라는 이름의 파일을 프로젝트 디렉토리에 생성합니다. 이 파일은 Grunt의 구성 정보를 담고 있습니다.

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    versioning: {
      options: {
        release: '<%= pkg.version %>'
      },
      files: {
        src: ['path/to/css/*.css', 'path/to/js/*.js']
      }
    }
  });

  grunt.registerTask('default', ['versioning']);
};

위의 코드에서 versioning은 사용자 정의한 태스크 이름입니다. 이 태스크는 정적 리소스 파일에 버전 관리를 수행합니다. src 속성에는 버전 관리를 적용할 CSS와 JavaScript 파일의 경로를 입력합니다.

그리고 package.json 파일에 다음과 같은 devDependencies를 추가합니다.

{
  "devDependencies": {
    "grunt-versioning": "^1.0.0"
  }
}

마지막으로, 터미널에서 grunt 명령어를 실행하여 버전 관리를 수행합니다.

grunt

이제 Grunt는 지정한 디렉토리의 CSS와 JavaScript 파일을 찾아 버전을 갱신하고, 해당 파일들을 업데이트된 버전으로 복사합니다.

이렇게 자동으로 버전 관리를 수행하면 웹페이지의 정적 리소스 파일을 효과적으로 관리할 수 있습니다.

더 많은 Grunt 플러그인과 구성 옵션에 대해서는 Grunt 공식 문서를 참조하세요.

• Grunt 공식 사이트: https://gruntjs.com/
• Grunt-versioning 플러그인: https://www.npmjs.com/package/grunt-versioning