Grunt是什么？

大家好，我是IT修真院武汉分院第5期的学员景鑫，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

Grunt就和photoshop里面的插件一样，它能够帮我们自动完成一些反复重复的任务。在ps插件里，我们经常会用动自动切图，自动导出切片这样的工具。在grunt里面，我们可以使用自动编译LESS、压缩CSS、JS这样的工具。Grunt是一个平台，没有插件，Grunt什么事也不能做。它是提供了一个标准，任何插件都要去遵守的一个机制和规则。就和USB接口一样，接在USB插口的，有可能是U盘，摄像头这些完成不同功能的外设。

除了 Grunt 之外，同类型比较火的还有 Gulp 这个工具。其实两个东西的功能是一样的，只不过是任务配置 JS 的语法不同，Gulp 的 Gulpfile.js 的写法更加通俗易懂，上手更快。但是 Gulp 的插件等感觉不如 Grunt，Grunt 官方提供了一些常见的插件，满足大部分日常工作，而且可靠值得信赖，而 Gulp 好像没有太多官方出品，各种插件不太规范。简单的说，Grunt 和 Gulp 就像 iPhone 与 Android 一样，一个质量高学习难一点，一个学起来简单但是有点那个。

2.知识剖析

2.1安装Node.js

2.2使用npm安装全局grunt-cli

2.3npm install  grunt

3.常见问题

3.1没有安装grunt插件，直接在任务配置文件中配置任务

3.2没有自己建立Gruntfile.js文件

3.3不会写任务配置代码

4.解决方案

见demo

5.编码实战

5.1首先打开node的cmd，使用npm安装全局的grunt-cli，这个东西其实不是grunt本身，它相当于grunt的一个命令行，可以通过cmd去操作grunt去执行各种各样的功能

使用node命令行安装全局的grunt-cli

5.2接下来我们说一下我们的项目，以及想要完成的目的，我们的项目比较简单，按照js、css文件夹进行了一下简单的分类，然后我们的目的是完成一个两个简单的任务，第一个是把js文件中的两个js文件分别为matching-page.js和matching-page2.js合成一个js文件，第二个是把killone.js压缩一下，就是这两个简单的任务，grunt有很多插件，可完成许多功能，不过用法基本上都差不多

5.3在项目文件夹目录创建package，这个步骤其实是使用npm安装其他插件或者下载引用的文件的必要的一个初始化步骤，这样可以把下载的文件或插件都在json文件中记录下来；之后呢，我们就安装grunt

安装package.json文件
安装grunt

5.4上面已经提到了，grunt是一个平台，本身没有任何功能，不过它提供了接口，可以使用各种各样的插件，我们这次的目的是进行文件的合并和压缩，因此我们要下载这两个grunt插件

安装需要使用的插件

5.5到此为止，我们需要借用的环境和插件就都搞好了，下载需要配置一个Gruntfile.js文件，这个文件是自己写的，用来告诉我们需要这些插件为我们完成什么样的任务；这个文件有固定的格式，首先是所有的代码都要放在module.exports =function(grunt) {}里面，之后文件分为三个部分，第一部分为任务配置代码，我们需要使用什么插件，完成什么样的任务，都罗列出来，不同的插件有不同的使用格式，这个需要去网上查，这个是使用grunt的主要难点；

任务配置代码

第二部分就比较简单了，是加载插件部分，即我们完成以上任务需要用到的插件都在这部分中罗列出来，这些插件就会得到加载

插件加载

最后一部分是任务注册，其作用是这样的，就是我们在第一部分罗列出来的所有任务，我们并不一定要一次性把它们全部执行，这里就给了一个灵活控制的设置，即我们可以按照我们自己的需要，给任务分一下堆，然后再给每个堆起个名字，这样我们需要执行任务的时候，直接在命令行中使用grunt taskname命令，任务名称对应的任务就会得到执行

任务注册

5.6到这里需要我们配置的东西都配置好了，接下来我们在node命令行中去执行任务就可以了

使用node命令行执行任务

看到Done和文件大小的转行显示，我们知道，任务成功的完成了

6.拓展思考

Grunt和Gulp用起来有什么区别，哪个更好用一些

7.参考文献

Grunt新手一日入门

Gruntfile.js文件配置模块 

8.更多讨论

grunt和webpack的区别

课后问题

问：grunt可以设置文件路径么？

答：可以的，比如合成文件功能，合成哪两个文件，合成的文件放在哪，都是可以设置的，它是通过相对路径来设置的

问：grunt和gulp的用户体验如何？

答：目前使用gulp的用户比较多，原因在于两者功能基本是一样的，但是gulp的文件配置要简答的多，容易上手，而grunt的任务文件配置就相对来说复杂一些；但是grunt的优点在于它有大量的官方插件，这个插件质量有保证，gulp虽然插件也多，但是鱼龙混杂，质量往往难以保证，比如有的文件合成插件，合成之后的文件是没法打开的

问：grunt和webpack的区别

答：两者不是一个类型的工具，grunt和gulp都属于自动化处理器，用于一些文件压缩，代码查错，文件转译等等，而webpack主要是做代码的模块化管理的，grunt的有些功能webpack也可以做，但是它主要不是做这个的

PPT

【武汉-第174期】Grunt是什么？_腾讯视频