2016-04-18

初探 Grunt 自动化构建工具

如果你和我一样是 Win 开发环境,在安装 Grunt 之前,建议先安装 Cmder,不是必须!

Cmder:http://cmder.net/
Cmder Github:https://github.com/cmderdev/cmder

Grunt-JavaScript

Grunt 通过 npm 安装和管理,npm 是 Node.js 的包管理器。首先需要安装 Node.js ,快捷键 Win+R 运行 Cmder/cmd 通过命令行安装 Grunt。

安装、检测与更新

安装 Node.js 新版本已经集成了 npm ,所以只需要检测一下版本看是否安装成功

检测 Node.js 版本:node -v
检测 NPM 版本:npm -v
升级更新 NPM :npm update -g
全局安装 Grunt :npm install -g grunt

新建 Grunt 项目时,需要在该项目的根目录下新建 package.json 和 Gruntfile.js 配置文件

package.json 配置文件

通过 Cmder 命令行 npm init 按提示步骤创建文件内容。该文件可手动修改,或在下载插件时也会自动更新。

安装 Grunt :npm install grunt --save 之后查看 package.json 文件,你会发现该文件已被,新增了

  1. "dependencies": {
  2.   "grunt": "^1.0.1"
  3. }

项目的根目录下也会新增一个 node_modules 文件夹,在以后安装的插件都会下载到这个文件夹下。

接下来我们尝试安装 Bower npm install -g bower ,安装成功之后,你会发现 package.json 文件中新增了

  1. "dependencies": {
  2.   "bower": "^1.7.9",
  3.   "grunt": "^1.0.1"
  4. }

在查看 node_modules 文件夹,你会发现也新增了一个 bower 文件夹,相信这样就能很清楚的明白它的工作原理。

一个简单的 package.json 配置文件模板

  1. {
  2.   "name": "my-project-name",
  3.   "version": "0.1.0",
  4.   "devDependencies": {
  5.     "grunt": "^0.4.5",
  6.     "grunt-contrib-jshint": "^0.10.0",
  7.     "grunt-contrib-nodeunit": "^0.4.1",
  8.     "grunt-contrib-uglify": "^0.5.0"
  9.   }
  10. }

Gruntfile.js 配置文件

在 Gruntfile.js 配置文件中要执行的则是 grunt 插件执行的相应任务,uglify 压缩文件插件,一个简单的 Gruntfile.js 配置文件例子。

  1. module.exports = function (grunt) {
  2.   // 项目配置
  3.   grunt.initConfig({
  4.     //读取配置项
  5.     pkg:grunt.file.readJSON("package.json"),
  6.     //执行的具体任务
  7.  
  8.     //压缩文件
  9.     uglify:{
  10.       // 加注释
  11.       options:{
  12.         banner:"/* <%= pkg.name %> <%= pkg.version %>*/ \n"
  13.       },
  14.       build:{
  15.         //被压缩文件的路径
  16.         src: "js/jquery.js",
  17.         //被压缩后的文件路径
  18.         dest: "dest/jquery.min.js"
  19.       }
  20.     }
  21.   });
  22.   //加载插件
  23.   grunt.loadNpmTasks("grunt-contrib-uglify");
  24.   //默认执行任务(数组中依次执行默认任务)
  25.   grunt.registerTask("default",["uglify"]);
  26. };

给 Grunt 指定任务,当在项目下运行 Cmder 执行 grunt 时,每个任务都会按照其出现的指定顺序依次执行。

  1. grunt.registerTask(taskName, [description, ] taskList)

定义一个要执行的默认任务

  1. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

还可以给任务指定参数,别名 “assets” 将执行 “cssmin” 和 “uglify” 两个任务,并且它们都带有一个 “forBower” 参数

  1. grunt.registerTask('assets', ['uglify:forBower', 'cssmin:forBower']);

更多关于 Grunt 中文教程和文档手册,请查看 Grunt 中文网:http://www.gruntjs.net/