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.jsongruntfile.js。分别简单介绍配置这两个文件的方法。

  1. package.json文件

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

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

  1. gruntfile.js

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

  1. 任务配置代码:

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

  1. 插件加载代码:

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

  1. 任务注册代码

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

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