Grunt는 자바스크립트의 빌드 도구로, 여러 작업을 자동화할 수 있는 기능을 제공합니다. CSS 파일에서 사용되지 않는 스타일(Purge Unused CSS)을 자동으로 삭제하는 작업은 Grunt의 플러그인인 “grunt-purgecss”를 사용하여 수행할 수 있습니다.

먼저, 프로젝트 폴더 안에서 Grunt를 설치해야 합니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하세요:

npm install -g grunt-cli

그런 다음, 프로젝트 폴더에서 Grunt를 초기화하고 package.json 파일을 생성하기 위해 다음 명령을 실행하세요:

npm init

프로젝트 폴더에 Gruntfile.js 파일을 생성한 후, 다음과 같은 구성을 추가하세요:

module.exports = function(grunt) {
  grunt.initConfig({
    purgecss: {
      my_target: {
        options: {
          content: ['*.html', '*.js'], // CSS 스타일 시트에서 사용되는 클래스가 포함된 HTML 또는 JavaScript 파일을 지정합니다.
          css: ['styles.css'], // 작업을 수행할 CSS 파일 경로를 지정합니다.
          rejected: true // 작업 후 사용되지 않는 스타일을 확인할 수 있는 로그를 보여줍니다.
        },
        src: ['styles.css'], // 작업을 수행할 CSS 파일 경로를 한 번 더 지정합니다.
        dest: 'purged-styles.css' // 삭제 작업 후 생성될 CSS 파일 경로를 지정합니다.
      }
    }
  });

  grunt.loadNpmTasks('grunt-purgecss');

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

위 예제에서는 ‘grunt-purgecss’ 플러그인의 설정을 추가했습니다. 이 플러그인은 “content”와 “css” 옵션을 통해 사용되는 클래스를 확인하고 삭제할 CSS 파일을 지정합니다. “rejected” 옵션을 true로 설정하면 작업 후 사용되지 않는 스타일을 확인할 수 있는 로그를 보여줍니다.

실행할 CSS 파일의 경로는 “src”와 “dest” 옵션에서 지정합니다. “src”는 작업을 수행할 CSS 파일 경로를, “dest”는 삭제 작업 후 생성될 CSS 파일 경로를 의미합니다.

이제 터미널에서 다음 명령을 실행하여 Grunt 작업을 실행할 수 있습니다:

grunt

위 명령을 실행하면 CSS 파일에 사용되지 않는 스타일이 자동으로 삭제되어 “purged-styles.css”가 생성됩니다.

Grunt를 사용하여 CSS 파일에서 사용되지 않는 스타일을 자동으로 삭제하는 방법에 대해 알아보았습니다. Grunt의 다양한 기능을 활용하여 프로젝트 개발 과정을 자동화할 수 있습니다. 자세한 내용은 “grunt-purgecss”의 공식 문서를 참조하시기 바랍니다.