먼저, Grunt를 사용하기 위해 Gruntfile.js라는 파일을 프로젝트 디렉토리에 작성해야 합니다. 이 파일은 Grunt 작업을 정의하는데 사용됩니다. 설정을 시작하기 전에 Grunt와 관련된 플러그인을 설치해야 합니다. 이미지 압축을 위해 grunt-contrib-imagemin 플러그인을 사용할 수 있습니다. 다음 명령을 실행하여 플러그인을 설치합니다:

npm install grunt-contrib-imagemin --save-dev

설치가 완료되면 Gruntfile.js를 열고 다음 코드를 추가합니다:

module.exports = function(grunt) {
  grunt.initConfig({
    imagemin: {
      dynamic: {
        files: [{
          expand: true,
          cwd: 'images/',  // 압축할 이미지 파일이 있는 디렉토리 경로
          src: ['**/*.{png,jpg,gif}'],  // 압축할 파일 타입 설정
          dest: 'dist/images/'  // 압축된 이미지 파일이 저장될 디렉토리 경로
        }]
      }
    }
  });

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

이제 Gruntfile.js 파일에 이미지 압축을 위한 설정이 완료되었습니다. 이제 Grunt 명령을 실행하여 이미지 파일을 압축할 수 있습니다. 프로젝트 디렉토리에서 다음 명령을 실행하세요:

grunt

이 명령을 실행하면 images/ 디렉토리에 있는 모든 이미지 파일이 압축되어 dist/images/ 디렉토리에 저장됩니다. 압축된 파일은 원본 이미지 파일과 동일한 이름으로 저장되며, 원본 파일은 덮어씌워지지 않습니다.

이제 Grunt를 사용하여 이미지 파일을 압축할 수 있게 되었습니다. 추가적인 설정이 필요한 경우, Gruntfile.js 파일을 수정하여 원하는 작업을 수행할 수 있습니다. Grunt의 다른 플러그인과 함께 사용하여 더 많은 작업을 자동화할 수도 있습니다.

참고 문서:

• Grunt 공식 사이트
• grunt-contrib-imagemin 플러그인 문서