Grunt构建工具

Posted 2020-06-14

Grunt是javascript的构建工具，对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以简化工作。Grunt生态系统非常庞大。你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上。

 

一、Grunt安装：

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。奇数版本号的 Node.js 被认为是不稳定的开发版。

在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。

Grunt命令行（CLI）安装到全局环境中

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。 这样就能让多个版本的 Grunt 同时安装在同一台机器上。

 

CLI工作原理：每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务

 

二、准备一份新的Grunt项目

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 

package.json：应当放置于项目的根目录中。与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

{
  "name": "mygruntTest",
  "version": "0.0.1",
  "description": "js for uglify",
  "author": {
    "name": "圣耀",
    "email": "[email protected]"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tuupola/jquery_lazyload"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-cssmin": "~0.5.0",
    "grunt-contrib-jshint": "~0.3.0",
    "grunt-contrib-uglify": "~0.1.2"
  }
}

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过命令。

npm install <module> --save-dev

此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中

在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。任务流程可能是这样的：

• task:clean

• task:uglify

• task:qunit

• task:concat

在命令行进入项目所在目录，键入如下命令，npm会根据devDependencies中的配置，将需要的grunt及其插件下载到你的项目目录中。

npm install grunt --save-dev

grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。

插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。

 

 

参考：http://blog.csdn.net/playboyanta123/article/details/43230831