Grunt는 JavaScript 기반의 일련의 작업을 자동화하기 위한 도구입니다. 이를 사용하여 프로젝트의 리소스 파일을 압축하고 최적화할 수 있습니다.

먼저, Grunt를 설치해야 합니다. 다음 명령어를 사용하여 전역으로 Grunt 명령어를 사용할 수 있도록 설치하세요:

npm install -g grunt-cli

이제 프로젝트 디렉토리에서 다음 명령어를 사용하여 Grunt를 설치하세요:

npm install grunt --save-dev

그리고 압축 및 최적화 작업을 위해 필요한 플러그인을 설치하세요. 예를 들어, JavaScript 파일을 압축하기 위해 grunt-contrib-uglify 플러그인을 사용할 수 있습니다. 다음 명령어를 사용하여 플러그인을 설치하세요:

npm install grunt-contrib-uglify --save-dev

이제 Gruntfile.js라는 파일을 프로젝트 디렉토리에 생성하세요. 이 파일은 Grunt 설정을 담당하며, 압축 및 최적화 작업을 정의합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/*.js',
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);
};

위 코드에서 uglify 태스크는 src 디렉토리에 있는 모든 JavaScript 파일을 압축하여 dist 디렉토리에 <프로젝트 이름>.min.js라는 이름으로 저장합니다.

마지막으로, 프로젝트 디렉토리에서 다음 명령어를 사용하여 Grunt를 실행하세요:

grunt

이 명령어는 Gruntfile.js에 정의된 태스크(uglify 태스크)를 실행합니다. 결과적으로 src 디렉토리에 있는 JavaScript 파일이 압축되고 dist 디렉토리에 최종 결과물이 생성됩니다.

이와 같은 방식으로 다른 리소스 파일(예: CSS, 이미지 등)에 대해서도 Grunt를 사용하여 압축 및 최적화 작업을 수행할 수 있습니다.

Grunt 공식 웹사이트(https://gruntjs.com/)에서 더 많은 플러그인과 설정 옵션에 대한 정보를 확인할 수 있습니다.