Grunt是一套前端自动化构建工具,可以帮助我们简化开发中需要反复处理的任务,甚至可以实现自动构建等功能。Grunt到底是怎么运转的?
<span style='color:#f25'>node和npm</span>
Grunt项目基于Node.js,Grunt和相关的插件都通过npm安装并管理。
<span style='color:#f25'>Grunt-cli</span>
<span style='color:#195'>Grunt命令行用于调用与Gruntfile文件在同一目录中的Grunt模块</span>,通过-g参数把Grunt命令行安装到全局环境中,这样的话在所有文件目录中都可以调用grunt相关的命令。
在命令行中运行Grunt相关命令时(比如$grunt default),内部会根据node提供的require系统查找来当前目录中安装的Grunt,如果找到那么加载,并把加载的grunt作为参数传递到Gruntfile文件中,然后执行指定的任务。
<span style='color:#f25'>Task</span>
Task就是任务的意思,grunt支持自定义任务,也支持使用现成的插件任务。比如向控制台输出一句问候这可以被认为是一个Task,对所有的js文件进行压缩这也是一个Task,通常任务(Task)都是可配置的。
<span style='color:#f25'>Grunt本地依赖</span>
安装了grunt命令行不等于就安装了grunt,这只是让我们拥有了在命令行中使用grunt相关命令的能力,对于每个需要使用grunt的工程,仍然需要为其配置grunt本地依赖。
<span style='color:#f25'>Grunt插件(Plugins)</span>
<span style='color:#195'>Grunt插件是一系列能够用于不同项目的可配置任务的集合。</span>Grunt插件通常以npm*的形式发布。Grunt官网的插件列表列出了所有可用的Grunt插件,截止当前的插件数量为6,393个,其中带有contrib前缀的插件由Grunt官方开发和维护。
<span style='color:#f25'>package.json文件</span>
<span style='color:#195'>package.json文件用于被npm存储项目的元数据,以便将此项目发布为npm模块。</span>我们可以在此文件中列出项目依赖的Grunt和Grunt插件,保存在devDependencies(开发依赖)配置字段内,我们可以通过$npm install命令来加载该文件中的所有依赖项。
<span style='color:#f25'>Gruntfile.js文件</span>
Gruntfile文件是Grunt项目中最核心的文件,该文件同package.json文件一起存放在项目的根目录中,主要用来配置或定义任务(task)并加载Grunt插件。标准的grunt项目中必须拥有package.json和Gruntfile这两个文件。
<span style='color:#f25'>node_modules文件夹</span>
node_modules文件目录存放着从远程仓库下载的grunt以及所有相关的grunt插件。