여기에는 Grunt의 grunt-inline 플러그인을 사용하는 예제가 있습니다. 이 플러그인은 HTML 파일 내의 CSS, JavaScript 및 이미지를 인라인으로 처리할 수 있습니다.

먼저, 프로젝트의 package.json 파일에 grunt-inline 플러그인을 추가합니다.

{
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-inline": "^1.2.0"
  }
}

그런 다음, Gruntfile.js 파일에서 다음 작업을 설정합니다.

module.exports = function(grunt) {
  grunt.initConfig({
    inline: {
      dist: {
        options: {
          // 인라인 처리할 파일
          'dist/index.html': 'src/index.html'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-inline');

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

위의 예제에서는 src/index.html 파일을 dist/index.html에 인라인으로 처리합니다. src/index.html 파일에는 인라인으로 처리되어야 하는 CSS, JavaScript 및 이미지 참조가 포함되어야 합니다.

마지막으로, 터미널에서 grunt 명령어를 실행하여 작업을 수행합니다.

$ grunt

이 명령을 실행하면 dist/index.html 파일에는 인라인으로 처리된 리소스가 포함됩니다. 이제 HTML 파일을 사용할 준비가 되었습니다!

더 많은 옵션과 사용 사례는 grunt-inline 문서를 참조해주세요.