Grunt

Grunt 是一个基于 JavaScript 的任务运行器 （Task Runner） ，广泛用于前端和 Node.js 项目中的自动化诸如压缩、编译、单元测试、代码检查等任务，它的执行原理主要基于配置和插件系统。

npm

npm i -D grunt grunt-cli grunt-contrib-clean grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-htmlmin grunt-contrib-uglify load-grunt-tasks

yarn
yarn add -D grunt grunt-cli grunt-contrib-clean grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-htmlmin grunt-contrib-uglify load-grunt-tasks

pnpm
pnpm add -D grunt grunt-cli grunt-contrib-clean grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-htmlmin grunt-contrib-uglify load-grunt-tasks

package.json
{
  "scripts": {
    "test": "grunt --force"
  }
}

基本结构

Gruntfile.js
module.exports = function (grunt) {
  require("load-grunt-tasks")(grunt); // 注入所有的grunt插件

  // initConfig：这是配置任务选项和数据的地方。
  grunt.initConfig({
    // 获取解析package.json,将内容保存在pkg中 
    // 读取package.json：通常通过grunt.file.readJSON('package.json')读取项目的元数据。
    pkg: grunt.file.readJSON("package.json"),
    //js压缩配置：在这里定义每个任务的配置。例如，一个用于压缩JS文件的任务可能如下所示：
    uglify: {
      options: {
        stripBanners: true, // true 允许添加头部信息
        banner:
          '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd") %> */\n', //在头部添加js文件名和时间的注释
      },
      build: {
        src: "./src/js/index.js",
        dest: "build/js/<%=pkg.name%>-<%=pkg.version%>.min.js",
      },
    },
    //css压缩
    cssmin: {
      options: {
        report: "gzip",
      },
      build: {
        expand: true,
        cwd: "./src/css",
        src: ["style.css"],
        dest: "./build/static/css",
      },
    },
    //html压缩
    htmlmin: {
      options: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeOptionalTags: true,
      },
      build: {
        expand: true,
        cwd: "./src/html",
        src: ["*.html"],
        dest: "./build",
      },
    },
  }); //定义各模块的参数，即初始化配置

  grunt.loadNpmTasks("grunt-contrib-uglify"); //加载完成任务所需要的模块
  grunt.loadNpmTasks("grunt-contrib-cssmin");
  grunt.loadNpmTasks("grunt-contrib-htmlmin");

  grunt.registerTask("default", ["uglify", "cssmin", "htmlmin"]); //定义任务
};

任务注册和执行

任务注册：通过 grunt.registerTask 注册任务，这是 Grunt 的核心 API 之一。它允许用户定义任务名和相关的处理函数。
任务解析：Grunt 解析 Gruntfile.js ，根据配置和注册的任务创建一个任务队列。

文件处理

文件API：Grunt 提供了一套文件处理 API ，用于读写文件、处理文件路径等。
Glob模式：Grunt 使用 Glob 模式匹配文件，这在任务配置中非常常见。

配置处理

配置API：grunt.initConfig 用于初始化任务配置。配置对象通常在 Gruntfile.js 中定义。
配置解析：Grunt 在运行任务之前解析这些配置。

命令行接口（CLI）

CLI工具：Grunt 附带了一个命令行工具，它解析用户在命令行中输入的命令和选项。
参数解析：CLI 处理参数并触发相应的任务执行。

事件系统

事件驱动：Grunt 具有事件驱动的架构，任务和插件可以触发和监听事件。
任务通信：事件系统允许不同任务之间进行通信。

Grunt

优点

自动化：Grunt 能够自动化几乎所有重复的工作，如 编译 、压缩 、单元测试 等，提高开发效率。
插件丰富：有大量的插件可用，几乎对于任何任务都有现成的解决方案。
社区支持：作为最早的 JavaScript 任务运行器之一，Grunt 拥有一个庞大的用户和贡献者社区。
配置驱动：基于配置的工作流使得 Grunt 在某些方面更易于理解和使用，特别是对于那些偏好声明式编程的开发者。
定制化：可以很容易地编写自定义任务和插件，满足特定的需求。

缺点

配置繁琐：对于复杂的项目，Grunt 的配置文件可能会变得非常长和复杂。
性能问题：Grunt 在执行多个任务时可能会比其他工具（如 Gulp ）慢，因为它频繁地读写磁盘。
学习曲线：新用户可能需要一些时间来理解 Grunt 的工作方式和配置格式。
较少的代码优化：与 Webpack 和 Rollup 等模块打包器相比，Grunt 在代码优化和处理方面提供的功能较少。
新项目采用率下降：随着 Webpack 和 Gulp 等工具的流行，新项目中使用 Grunt

总结

Grunt 是一个功能强大的任务自动化工具，特别适用于那些需要大量重复任务的项目。尽管在某些方面它可能不如一些新兴工具高效，但它的灵活性和广泛的社区支持仍然使它成为许多项目的可靠选择。

基本结构​

任务注册和执行​

文件处理​

配置处理​

命令行接口（CLI）​

事件系统​

优点​

缺点​

总结​