写在前面的话：

1）自动化构建工具可以减少很多重复性工作

2）除了grunt，同类型的自动化构建工具还有很多，它们各有所长，与其争论各种工具的好坏，还不如选一个自己最顺手的，最贴合项目需求的。

那Grunt究竟是个什么东西呢？

Grunt是一个Javascript 任务运行工具，用于自动化构建前端项目。它是基于 Node.js 平台的命令行工具，通过配置任务和加载插件，可以帮助开发者自动执行各种重复性的任务，如文件合并、压缩、编译等等。

基本准备工作：

1. 要使用grunt首先就必须要安装node.js

官网下载msi安装文件

node安装默认安装npm模块，npm 是 Node.js 的包管理器，全称为 "Node Package Manager"。

由于最新版本的node.js已经不支持windows 7了，如果当前操作系统是windows 7，需要到以下地址寻找能支持win7的历史版本（比如说版本号12.22.12）

https://nodejs.org/zh-cn/download/releases/

2. 全局安装 Grunt 命令行工具（grunt-cli）

npm i -g grunt-cli

"cli" 是 "Command Line Interface" 的缩写，表示命令行界面。

-g 是global的缩写，表示将包安装为全局包，全局安装也就是说你可以在任何地方都可以执行grunt命令。

3 安装grunt和grunt各种插件

1）在命令行中，切换到项目目录，使用npm init创建 package.json文件，package.json 是一个用于描述项目的配置文件，其中包含了项目的元数据和依赖信息。

你也可以手动添加package.json文件，一个空白的package.json文件如下

{
  "name": "",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
  }
}

2）运行以下命令来安装grunt和各种插件：

npm install grunt --save-dev

npm install 插件名称 --save-dev

该条命令将在开发依赖项中安装 xxx 插件，并将其添加到 package.json 文件的 devDependencies 部分。

3）在项目的根目录下，新建Gruntfile.js

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
  });
  // 加载任务插件
  grunt.loadNpmTasks('task名称');
  // 默认任务
  grunt.registerTask('default', ['任务名称']);
}

常见grunt各种插件

grunt-contrib-clean ：清除文件（打包处理生成的）

grunt-contrib-concat：合并多个文件代码到一个文件

grunt-contrib-uglify：压缩js文件

grunt-contrib-jshint：js语法检查

grunt-contrib-cssmin：压缩/合并css文件

grunt-contrib-htmlmin：压缩html

grunt-contrib-imagemin：压缩图片

grunt-contrib-copy：复制文件、文件夹

grunt-contrib-watch：实时监听文件变化、调用相应任务重新执行

grunt对象的常见属性

grunt 对象是 Grunt 构建工具的核心对象，它具有许多常见属性，用于配置和执行任务。以下是 grunt 对象的一些常见属性：

config对象：用于访问和修改Grunt的配置信息。

grunt.registerTask('default',['concat','uglify','copy'], function() {
var options = grunt.config.get('concat.options');
var src = grunt.config.get('concat.dist.src');
var dest = grunt.config.get('concat.dist.dest');
// grunt.config.get方法用于获取concat任务的配置信息，并对其进行操作。
});

grunt.initConfig(配置对象)

该方法是grunt.config.init()方法的别名

initConfig用于初始化 Grunt 配置对象，接受一个配置对象作为参数。

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),    //变量
  clean:{},    //任务属性（）
  copy: {},    //任务（task）
  cssmin:{},    //任务（task）
  uglify:{}   //任务（task）
});

可以通过grunt.config(属性名) 直接访问配置对象的属性，如grunt.config("pkg")

这个pkg存储从 package.json 文件中读取的内容。

比如说 pkg.name 读取的就是 package.json 中的name字段

grunt的task配置可以在initConfig()方法中指定，比如说上面代码段里的clean copy cssmin uglify就是一个一个的task。

task对象：注册、执行和加载外部任务

任务对象（task object）是在Grunt任务执行过程中被创建的一个对象，它包含了任务的上下文和方法，可以用于执行任务和访问任务属性。因为task是一个对象属性，所以它也有自己的一套方法，比如说以下两个方法就非常常用：

grunt.loadNpmTasks(任务名称)

该方法是grunt.task.loadNpmTasks()方法的别名，用于加载npm插件。

比如说上面的代码段，如果每个task都要执行，则需要写如下代码：

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');

这里可以引入load-grunt-tasks 插件，它们可以自动加载包含对应的grunt任务，这样上面的代码就可以简化成：

require('load-grunt-tasks')(grunt);

grunt.registerTask(执行名称，任务列表，回调函数)

grunt.registerTask('default', ['clean','concat','uglify','copy']);

该方法是grunt.task.registerTask ()方法的别名，用于创建任务。

执行名称为“default”可以直接grunt运行任务，如果想单独执行某个任务则可以使用grunt 任务名称，比如说 grunt clean

grunt.registerTask回调函数还有一个比较高级的用法

通过grunt.option 接收命令行传递过来的参数，来移除某个task，比如以下代码则可以通过isUglify来移除unglify相关的任务

grunt.registerTask('default', function() {
  var isUglify = grunt.option('isUglify');
  var tasks = ['clean:init','htmlmin','concat','uglify','clean:afterUglify','cssmin','clean:afterCssMin','copy','string-replace:dist'];
  if (!!isUglify && !isUglify) {
    tasks.splice(3,2);
  }
  grunt.task.run(tasks);
});

grunt --isUglify=false

任务属性（task properties）

task属性是用来定义和配置任务的，它们可以包含任务的输入、输出、选项等配置信息。

task属性通常包含以下几个重要的配置项：

task: {
  options: {},//指定任务的选项和配置参数。可以是一个对象，包含了任务的各种配置选项。
  target: {
    files: [//用于更灵活地指定输入和输出文件的配置项。可以是一个文件对象或文件对象数组，每个文件对象包含了src和dest属性。
    	src:'',//指定任务的输入文件或文件夹。可以是一个文件路径、文件匹配模式（如*.js），或一个文件路径数组。
      dest:''//指定任务的输出文件或文件夹。通常是一个文件路径。
    ],
    options: {}//target内的options属性，可以为每个目标设置不同的选项，以实现更灵活和可配置的任务。
  }
}

files属性

源文件-目标文件映射方式，用于task进行操作。所有的文件格式均支持src与dest属性

除了src和dest还有以下几个属性很常用：

files: { 
    expand: true, 
    cwd: config.src,
    ext:'.min.css'， 
    src: '**/*',
    dest: config.dest
}

1) expand

expand用于指定是否启用文件路径的扩展（expansion）。当 expand 设置为 true 时，Grunt会根据源文件的匹配模式和目标文件的目录结构，自动扩展文件路径。（常用来处理动态的src）

2) cwd 所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）

cwd 是 current working directory的缩写

比如设置cwd为/home/xxx/projectName，那么src的路径就是相对于这个/home/xxx/projectName的。
比如设置src为../src/*.js，匹配的文件就是/home/xxx/src/下的所有js文件。

3) ext 对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。

任务类型（task types）

任务类型是指不同类型的任务，例如单目标任务、多目标任务等。

1. 单目标任务（Single Target Task）：这种任务类型只有一个目标，它执行一组操作来处理特定的目标。在任务配置中，你可以直接定义任务的配置属性，而不需要使用目标选项（target）。

concat: {
     dist: {
         src: ['src/*.js'],
         dest: 'dist/bundle.js'
     }
 }

对于上面的的代码，它只有一个名叫dist的target，所以可以简写成：

concat: {
  src: ['src/*.js'],
  dest: 'dist/bundle.js'
}

2. 多目标任务（Multi Target Task）：这种任务类型可以根据配置中的多个目标(target)执行不同的操作。在任务配置中，你可以使用目标选项来定义不同的目标，并为每个目标提供独立的配置。

比如说一个copy task就含有两个target：js和html

copy:{
			js:{
				src: 'src/test/index.js',
				dest: 'index.js'
			},
			html:{
				src: 'src/test/index.html',
				dest: 'dest/test/index.html'
			}
}

运行grunt copy:js => 'src/test/'下的index.js拷贝到'dest/test/'下

运行grunt copy:html => 'src/test/'下的index.html拷贝到'dest/test/'下

运行grunt copy => 'src/test/'下的js和html都会拷贝。