grunt在前端工具中算是很有用的一个工具。

想一想如果没有这个工具，我们需要手动新建一个压缩代码后的文件夹，每次修改原始文件，都要手动压缩一下，再保存到压缩后的文件夹，想想都要疯掉。所以，grunt前端必不可少。

以下内容分别是：

  1. grunt安装和配置
  2. grunt压缩一个js的实例分析
  3. grunt 美化、压缩、合并代码文件或者代码文件夹里所有代码文件的代码实例

grunt的安装与配置

grunt的安装

grunt 依赖Node.js,所以请先确保安装完成Node.js.

  • 首先安装 grunt-cli工具。

    npm install grunt-cli -g

    记住：这里是全局安装。windows系统可能需要开启管理员权限启动命令行。

注意：grunt-cli并不是grunt工具本身，只是安装了这个工具，而是用来调用和gruntfile.js同一目录的grunt。真正的grunt是安装在项目目录下面的。

  • 然后进入你的项目目录，安装grunt（grunt工具是要安装在项目目录里面的）：

    npm install grunt --save-dev

    --save-dev就是告诉package.json，你在开发这个项目中依赖了这个插件，同时在package.json中的devDependencies也会出现你安装的这个插件的信息。方便你把项目传给别人，别人下载对应的插件。

grunt的配置

grunt如果正常使用，目录下面必须要有两个文件package.json和gruntfile.js。分别简单介绍配置这两个文件的方法。

  1. package.json文件

这个文件存储的是npm的一些元数据。比如：项目名称、版本、依赖的一些插件等等。是采用键值对的形式写的。

如果一开始项目没有这个文件，可以执行npm init 初始化这个文件。

  1. gruntfile.js

这就是一个js文件，采用的是js语法。文件内容主要分为三块：

  1. 任务配置代码：

这里面包含的当然是你需要执行的一个个任务的具体内容，比如：你打扫卫生时候要干的，扫地、洗碗、擦桌子、擦窗户等等任务内容。

  1. 插件加载代码：

你在这个过程中使用了哪些插件，把这些插件名称声明出来，仅仅的grunt是不能完成任务的，

  1. 任务注册代码

第一步分条写了很多条任务的具体内容，最后一步就是把注册一个总任务名称，比如：打扫卫生。然后声明要干总任务里面的哪几条分任务。

下面以详细代码来写js的压缩。其余内容只需要更改任务配置代码的