Grunt

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插件

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"), // 获取解析package.json,将内容保存在pkg中
    //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

都说 Grunt 老了，不维护了，其实不然，而是它的使命已经完成了。

Grunt 适合 MPA 应用，轻捷便利，对于了解它的人依然是那么好用。

至于缺点，都说不适合 SPA 应用，它出生的的年代还处于 MPA 还没有彻底冷淡的年代，但是处理 MPA 应用依然高效便捷。