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

Question

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

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

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

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

提前致谢。

Answer 1

根据@Will的建议，我通过混合我提到的3个插件以及@Will建议的grunt-Process HTML来实现这一目标。

我给你留下了解决这个问题的必要步骤，只需用自己的路径替换路径。

我的路径：

 .
 ..
 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']);
};

Answer 2

我认为你正在寻找grunt-Process HTML及其相当粉碎的包含子任务 。

在index.html文件中，您可以包含... includes。 :)

<!-- build:include my-styles.min.css -->
This will be replaced by the content of my-styles.min.css
<!-- /build -->

如果这对您不起作用，则可以使用Grunt-Run运行一个简化的缩小版本的简单bash脚本。