javascript - 使用 CSS 和 Javascript 缩小单个 HTML 文件的 Grunt 任务

Question

我正在做一个登录页面，我希望它尽可能轻巧，以便尽可能快地加载。我只有一个依赖项(一个配置文件)，其他所有内容都编码在一个名为 index.html 的 html 文件中。

虽然我在分别缩小 JS、HTML 和 CSS 方面没有问题，例如，在它们各自的 .js、.html 和 .css 文件中，但我似乎找不到一种方法来缩小包含3 个不同的方面。

对于我使用的 HTML grunt-contrib-htmlmin但我的主要目标是缩小该文件上的 js。

我知道我的目标是 2 或 3KB，我有缓存作为我的 friend 等，但原则上我想知道是否有直接的方法来实现，或者另一方面我需要组装最终的单独缩小后的 index.html 文件。

提前致谢。

Answer 1

按照@Will 的建议，我确实通过混合我提到的 3 个插件加上 grunt-Process HTML 来实现这一点。 @Will 建议的。

我将解决此问题的必要步骤留给您，只需将路径替换为您自己的即可。

我的路径:

 .
 ..
 index.html
 styles.css
 index.js

在控制台上:

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-htmlmin --save-dev
npm install grunt-processhtml --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin --save-dev

Gruntfile.js:

module.exports = function (grunt) {

  grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     cssmin: {
       minify: {
         options: {
           banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
         },
         expand: true,
         src: ['*.css', '!*.min.css'],
         dest: 'dist/',
         ext: '.min.css'
       }
     },
     uglify: {
       options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
       },
       build: {
         src: 'index.js',
         dest: 'dist/index.min.js'
       }
     },
     processhtml: {
       dist: {
         options: {
           process: true,
           data: {
             title: 'My app',
             message: 'This is production distribution'
           }
         },
         files: {
           'dist/index.min.html': ['index.html']
         }
       }
     },
     htmlmin: {
       dist: {
         options: {
           removeComments: true,
           collapseWhitespace: true
         },
         files: {
           'dist/index.html': 'dist/index.min.html'
         }
       }
     },

     clean: ['dist*//*.min.*']
   });

  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.registerTask('default', ['cssmin','uglify', 'processhtml', 'htmlmin','clean']);
  grunt.registerTask('build', ['cssmin','uglify', 'htmlmin', 'processhtml']);
};