如何使用 grunt 构建不依赖的 HTML 文件？

Question

我有一个项目，其中有包含依赖项的 html 文件（css 链接、javascript 链接、图像链接、字体链接、favicon.ico）。

使用 Grunt，我想编译每个 html 文件，以便拥有无依赖项的 html 文件：我希望所有依赖项都包含（缩小）在 html 文件中。

我该怎么做？我找到了解释如何连接和缩小 css/js 文件的教程，但我找不到如何将它们集成到带有图像和字体的 HTML 文件中。

我想这样做是因为我想将这些网页集成到一个小型Web服务器中，该服务器需要尽可能减少每个用户的HTTPS套接字数量（服务器上文件的大小是次要的）。

Answer 1

流这个

1. 安装Grunt和必要的插件:

   • 确保已安装 Node.js。
   • 如果尚未安装，请全局安装 Grunt CLI：

     npm install -g grunt-cli
     

   • 创建一个

     package.json

     npm init -y
     

   • 安装 Grunt 以及连接、缩小和内联所需的插件：

     npm install grunt grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-inline --save-dev
     

2. 设置 Grunt 配置:

   • 在项目目录中创建一个

     Gruntfile.js

     并配置任务以将资源连接、缩小和内联到 HTML 文件中。

这是一个示例

Gruntfile.js

：

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        
        // Concatenate CSS and JS files
        concat: {
            css: {
                src: ['path/to/css/*.css'],
                dest: 'build/css/combined.css'
            },
            js: {
                src: ['path/to/js/*.js'],
                dest: 'build/js/combined.js'
            }
        },
        
        // Minify concatenated CSS files
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'build/css',
                    src: ['*.css', '!*.min.css'],
                    dest: 'build/css',
                    ext: '.min.css'
                }]
            }
        },
        
        // Minify concatenated JS files
        uglify: {
            target: {
                files: {
                    'build/js/combined.min.js': ['build/js/combined.js']
                }
            }
        },
        
        // Inline CSS, JS, images, and other assets into HTML files
        inline: {
            dist: {
                options: {
                    cssmin: true,
                    uglify: true
                },
                src: 'src/*.html',
                dest: 'dist/'
            }
        }
    });

    // Load the plugins.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-inline');

    // Default task(s).
    grunt.registerTask('default', ['concat', 'cssmin', 'uglify', 'inline']);
};

说明：

1. 连接:

   • concat

     任务将多个CSS和JS文件组合成单个文件（

     combined.css

     和

     combined.js

     ）。

2. 缩小：

   • cssmin

     任务缩小了串联的 CSS 文件。

   • uglify

     任务缩小了串联的JS文件。

3. 内联：

   • inline

     任务将缩小的 CSS 和 JS 文件以及图像和其他资源直接内联到 HTML 文件中。

用途：

1. 整理你的项目目录:

   • 确保您具有以下结构：

     project/
     ├── src/
     │   ├── css/
     │   │   └── *.css
     │   ├── js/
     │   │   └── *.js
     │   ├── img/
     │   │   └── *.png, *.jpg, etc.
     │   └── *.html
     ├── build/
     ├── dist/
     ├── Gruntfile.js
     └── package.json
     

2. 运行咕噜声：

   • 执行默认的Grunt任务：

     grunt
     

运行 Grunt 后，

dist

目录将包含您的 HTML 文件，并内联所有依赖项，从而使它们无依赖项。

您可以进一步自定义

Gruntfile.js

以匹配您的特定项目结构和要求。