먼저, Grunt를 프로젝트에 설치해야 합니다. 프로젝트 폴더에서 다음 명령어를 실행하여 Grunt를 설치합니다.

npm install -g grunt-cli

그리고 Gruntfile.js 파일을 프로젝트 폴더에 생성합니다. 이 파일은 Grunt 태스크를 정의하는데 사용됩니다. Gruntfile.js 파일을 열고, 다음과 같이 grunt-uncss 플러그인을 로드하도록 설정합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    uncss: {
      dist: {
        files: {
          'dist/styles.css': ['index.html']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-uncss');
};

위의 예제에서는 index.html 파일에서 사용되지 않는 스타일을 제거하여 dist/styles.css 파일에 저장합니다. 필요에 따라 파일 경로와 이름을 수정할 수 있습니다.

마지막으로, 터미널에서 다음 명령어를 실행하여 Grunt 태스크를 실행합니다.

grunt uncss

이 명령어를 실행하면 index.html과 연결된 CSS 파일에서 사용되지 않는 스타일이 제거된 후, dist/styles.css 파일에 새로 저장됩니다.

Grunt를 통해 CSS 파일의 중복된 스타일을 자동으로 제거하는 방법을 살펴보았습니다. 이를 통해 CSS 파일의 크기를 줄이고, 웹 페이지의 성능을 개선할 수 있습니다.

참고 자료:

• Grunt 공식 사이트
• grunt-uncss 플러그인