grunt搭建项目实例+grunt.initConfig配置详解

作者：zccst

参考网址：
Grunt教程——初涉Grunt
[url]http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html[/url]
Grunt教程——安装Grunt
[url]http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html[/url]
Grunt教程——Gurnt任务的配置
[url]http://www.w3cplus.com/tools/grunt-tutorial-configuring-tasks.html[/url]


[b][size=xx-large]一、实践[/size][/b]

[size=large]实践1：最基础（能运行起来）[/size]

[b]第一步：搭建环境，主要是nodejs, npm, grunt(grunt-cli)[/b]
$ mkdir installGrunt
$ cd installGrunt

$ npm install grunt --save-dev #如果看到如下信息表示grunt安装成功
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5


[b]第二步：创建 package.json[/b]

# 在项目的根目录下创建package.json文件
（1）根据grunt-init模板自动创建一个特定的package.json文件；（需要先安装 npm install -g grunt-init）
（2）在命令终端通过npm init命令自动创建一个基本的package.json文件；（亲自测试过）
（3）从官网上复制或者下载一个package.json文件；（对新手最方便）
（4）手工创建一个package.json文件；（对高手最方便）


[color=red][b]添加依赖[/b][/color]
（1）逐个添加，逐个执行命令 $ npm install XXX --save-dev
XXX是常用插件名，如grunt-contrib-jshint
最好是全称，不要简写。我曾试过 npm install cssmin --save-dev 生成了无用的东西。

（2）也可以一次在package.json中添加多个插件，然后一次执行命令 $ npm install
安装声明的依赖关系grunt插件同时， 在项目根目录下添加一个node_modules目录，目录中放置对应grunt插件所需的插件目录名。
注：当你给npm install添加 --save-dev标志是，一个波浪线范围将被用于你的package.json中。（建议）


[b]第三步：创建Gruntfile.js[/b]
# 添加自己合适的gruntfile配置，运行，得出预期输出
module.exports=function(grunt){
//任务配置
grunt.initConfig({
});
//载入任务
grunt.loadNpmTasks();
//注册任务
grunt.registerTask();
}
内容参见demo1

$ grunt #

运行成功，在目标目录下创建了一个压缩后的js，引用压缩后的js，效果一样。


[size=large]实践2：加上css压缩的过程[/size]

1，在package.json使用命令加一个插件
npm install grunt-contrib-cssmin --save-dev #一开始使用npm install cssmin不对，下了两个

2，在Gruntfile.js中三个部分都加入cssmin相关的命令

3，运行grunt


注：如果已经在initConfig里配置了uglify和cssmin，则不能再注册任务名为uglify和cssmin，报错如下
(node) warning: Recursive process.nextTick detected. This will break in the next version of node.
Please use setImmediate for recursive deferral（递归延迟）.

解决办法：注释掉
//grunt.registerTask("uglify",['uglify']);
//grunt.registerTask("cssmin",['cssmin']);
grunt.registerTask("default",['uglify','cssmin']);//默认执行的任务

参考文档：
[url]http://www.k68.org/?p=1232[/url]


[b][size=xx-large]grunt.initConfig配置详解[/size][/b]

简单的能运行起来，到真正的能够在项目中用起来，中间还有很长的一段路要走。
那就是熟悉配置参数的含义，以能够使用较复杂的配置参数，完成工作。
之前一直对配置参数的含义一直似懂非懂，在网上搜的东西一般都是片段，说得不够完整和透彻（被这些文章害苦了，折腾了很久，始终没有完整理解），其实有三个地方非常容易能找到：

1，官网-配置任务 一节描述的很清楚，包括任务的结构和参数含义。
[url]http://www.gruntjs.net/docs/configuring-tasks/[/url]

2，github搜对应的任务。如grunt-cmd-transport

3，github上通过seajs等推荐的链接。如：
[url]https://github.com/seajs/seajs/issues/672[/url]


[b]常用插件：[/b]
grunt-contrib-jshint（js语法检查）
grunt-contrib-uglify（采用UglifyJS压缩js）
grunt-contrib-concat（js合并）

grunt-contrib-cssmin（Css压缩合并）

grunt-htmlhint（html语法验查）


如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]