1. Grunt 설치하기: Node.js를 설치한 후에 터미널 또는 명령 프롬프트에서 다음 명령어를 사용하여 Grunt를 전역으로 설치합니다.

npm install -g grunt-cli

1. 프로젝트 디렉토리에서 package.json 파일 생성하기:

npm init

종속성을 설정해야하므로 프로젝트 디렉토리에서 package.json 파일을 생성하는 명령어를 실행합니다. 명령 프롬프트에서 ‘Enter’를 누르고 필요한 정보에 대한 질문에 답변합니다.

1. Grunt 플러그인 설치하기: CSS 프리픽스 지원 및 압축을 위해 다음 플러그인을 설치합니다.

npm install grunt-autoprefixer
npm install grunt-contrib-cssmin

1. Gruntfile.js 파일 작성하기: 프로젝트 디렉토리에 Gruntfile.js 파일을 생성하고 다음 코드를 추가합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    autoprefixer: {
      options: {
        browsers: ['last 2 version', 'ie 9']
      },
      dist: {
        files: {
          'dist/css/main.css': 'src/css/main.css'
        }
      }
    },
    cssmin: {
      dist: {
        files: {
          'dist/css/main.min.css': 'dist/css/main.css'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

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

1. Grunt 실행하기: 터미널 또는 명령 프롬프트에서 다음 명령어를 사용하여 Grunt를 실행합니다.

grunt

위의 코드에서 src/css/main.css 파일을 dist/css/main.css로 프리픽스를 지원하여 저장하고, dist/css/main.css 파일을 압축하여 dist/css/main.min.css으로 저장합니다.

Grunt를 사용하여 CSS 파일을 자동으로 프리픽스 지원 및 압축하는 방법에 대해 안내했습니다. Gruntfile.js에서 설정을 자유롭게 변경하여 프로젝트에 맞게 사용할 수 있습니다. 추가적인 Grunt 플러그인을 사용하여 기능을 확장할 수도 있습니다. 자세한 내용은 Grunt 공식 문서를 참조하세요.

참고자료:

• Grunt 공식 웹사이트
• Gruntfile.js 예제
• grunt-autoprefixer 플러그인 GitHub 저장소
• grunt-contrib-cssmin 플러그인 GitHub 저장소