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

Grunt task(s) to minify single HTML file with CSS and Javascript

本文关键字：文件 Grunt 任务 HTML 单个 CSS Javascript 缩小 使用      更新时间：2023-09-26

我正在做一个登录页面，我希望它尽可能轻量级，以获得最快的加载时间。我有一个依赖项（一个配置文件），其他所有内容都编码在一个名为index.html的html文件上。

虽然我在分别缩小JS、HTML和CSS（例如，在它们各自的.JS、.HTML和.CSS文件中）方面没有问题，但我似乎找不到缩小包含三个不同方面的单个HTML文件的方法。

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

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

提前谢谢。

根据@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']);
};

我认为您正在寻找咕哝的ProcessHTML及其相当出色的include子任务。

在你的index.html文件中，你可以包括。。。包括。：）

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

如果这对你不起作用，一个简单的bash脚本连接缩小的版本也可以用Grunt run运行。

相关文章：