grunt使用

作者：zccst
Q：Grunt为何物？
A：一个专为JavaScript提供的构建工具。

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

Q：grunt是如何工作的？
A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。
就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。
这些任务比如：
clean:删除临时文件
uglify:压缩
qunit:测试
concat:合并

任务流程可能是这样的：
task:clean
task:uglify
task:qunit
task:concat


待查的资料：
gulp

Grunt打造前端自动化工作流
[url]http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml[/url]

【grunt整合版】30分钟学会使用grunt打包前端代码
[url]http://www.cnblogs.com/yexiaochai/p/3603389.html[/url]


[b]1，grunt安装[/b]
（1）安装grunt CLI
npm install -g grunt-cli #把grunt命令植入系统路径，这样就能在任意目录运行他
按照官方的说法，grunt-cli只是为了在同一台机器上安装不同的grunt版本，那么咱们先不去管他。

（2）在项目中使用grunt
首先在D盘新建一个项目（文件夹就好）,在里面新增两个文件
① package.json
② Gruntfile.js
package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。
"devDependencies": {
"grunt": "~0.4.1",
"grunt-cmd-transport": "~0.2.0",
"grunt-cmd-concat": "~0.2.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-clean": "~0.4.0"
}
Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，其中详细定义了每个任务的细节和执行任务的顺序等。

（3）安装grunt任务
npm install grunt --save-dev


[b]2，grunt配置[/b]
Gruntfile.js通用的写法：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
});
};
grunt配置的主体都在grunt.initConfig中。pkg: grunt.file.readJSON('package.json')是为了以后在其它任务（task）中方便读取package.json已经定义好的值。

一般完整的grunt.js是：

module.exports = function(grunt) {
    grunt.initConfig({
	    pkg: grunt.file.readJSON('package.json'),
	    transport: {
		    dialog: {
			    files : [{
				    src : '*',
					dest : '.build/styles/component/dialog/src'
				}]
			}
		},
	    concat: {
			dialog: {
				files: {
					"dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
				}
			}
		}
    });

    grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');

    grunt.registerTask('build', ['transport', 'concat']);
    //grunt.registerTask('default', ['transport', 'concat']);
};

transport就是一个任务（task），该插件主要负责提取模块中的依赖，
并为每个模块设置模块ID。dialog是任务的其中一个目标（Target），[color=red]files中定义了要对哪些文件执行该任务（src），以及执行任务后，生成的文件放在什么地方(dest)[/color]。


[b]常用的任务有：[/b]

grunt-cmd-transport #负责提取模块中的依赖，并为每个模块设置模块ID。dialog是任务的其中一个目标（Target），files中定义了要对哪些文件执行该任务（src），以及执行任务后，生成的文件放在什么地方(dest)。

grunt-cmd-concat #将多个合并文件为一个文件。

grunt-contrib-uglify #压缩dist/xx.js到dist/xx.min.js。

grunt-contrib-jshint #提示

grunt-contrib-clean #清除临时文件夹（build之后）

grunt-rev-md5 #grunt-rev 还是老样子，作用是把制定的文件或者文件夹里的文件名前加入 md5 字符串, 比如 css/app.css 被重命名为 css/ae35dd05.app.css
但是这时候模板里的标签还是没有替换的。所以需要用到 grunt-usemin 用来替换模板里的链接为更改后的

grunt-contrib-cssmin #压缩css


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