grunt初体验

最近参与多人团队项目开发过程之中，使用到了grunt来构建项目，包括一些文件的压缩，合并等操作。亲自动手进行grunt任务的配置，学到了很多东西。现将自己的学习过程记录如下：

1、对于一个项目而言，使用grunt构建工具主要依托于两个文件Gruntfile.js/Gruntfile.coffee以及package.json，其中第一个文件详细配置了grunt需要执行的任务信息，第二个文件则是每一个node项目规范要求的文件，里面存储一下有关该项目的环境信息；

2、Gruntfile.js文件的配置，在项目的初始阶段，我仅仅配置了两个任务，browserify和uglify，其中前者的用途是允许前端人员像开发服务器端node程序一样，模块化的开发项目，说白一点，就是该任务能够识别程序中的require等一些列node下的语言，进而对代码进行组织，使得前端在页面上直接引用该文件进而处理某些逻辑；后者的作用则是对文件进行压缩，这对页面加载性能方面有较大提升；

3、package.json文件的配置，主要是配置当前项目的详细信息，以及项目运行的依赖模块和开发时使用的开发模块，使用npm install安装开发模块之后就可以在本地进行自由开发。

下面说一下我这个项目的目录结构：

a、主目录下包括两个文件夹：build和js，以及两个js文件：Gruntfile.js和package.json；

b、使用grunt构建项目，自动将js下的文件编译到build目录下，并进行压缩处理。

先看一下Gruntfile.js文件的配置：

module.exports=function(grunt){
	grunt.initConfig({
		pkg:grunt.file.readJSON("package.json"),
		build_root:"build",
		js_root:"js",
		browserify:{
			compile:{
				expand:true,
				cwd:"js", //src文件的相对位置
				src:["*.js"],//源文件后缀名
				dest:"build/js",//构建文件所在目录
				ext:".js"//构建文件的后缀名
			}
		},
		uglify:{
			options:{
				sourceMap:true
			},
			compile:{
				expand:true,
				cwd:"js",
				src:["*.js"],
				dest:"build/js",
				ext:".min.js"
			}
		},
		watch:{
			options:{
				livereload:true
			},
			js:{
				files:['js/*.js'],
				tasks:['browserify:compile','uglify:compile']
			}
		}
	});
	grunt.loadNpmTasks("grunt-contrib-watch");
	grunt.loadNpmTasks("grunt-contrib-uglify");
	grunt.loadNpmTasks("grunt-browserify");

	grunt.registerTask("default",['browserify','uglify']);
};

　　在上述的grunt配置文件中，我主要配置了两个任务：browserify和uglify，并通过loadNpmTasks加载了模块任务，经过注册default任务之后，当运行grunt时，就会自动运行browserify和uglify两个任务，从而执行对应的操作，注意一点，这两个任务是顺序执行的，即先编译后压缩。

细心的你可能已经注意到了，我额外配置了一个watch任务，该任务的主要功能是监听配置文件中files的文件变化，当发现文件有变动的时候，自动执行上述两个任务，重新构建文件。

package.json文件中的配置信息如下：

{
	"name":"practice",
	"version":"0.0.1",
	"devDependencies":{
		"grunt":"~0.4.1",
		"grunt-browserify": "~1.3.2",
    	        "grunt-contrib-copy": "~0.5.0",
    	        "grunt-contrib-watch": "~0.5.1",
    	        "grunt-contrib-uglify": "~0.4.0"
	}
}

　  举例：

1、使用git bash转到项目目录下，演示使用的是E盘下的cnblog-test目录，转到cnblog-test\js目录下使用下面命令创建两个文件

touch parent.js

touch child.js

　 2、使用vi打开上面两个文件 分别输入下述代码

//parent.js文件内容
module.exports=function(){
    console.log("i am parent");
};

//child文件内容
var parent=require("./parent");
parent();
console.log("i am child");

　3、运行grunt 就可以看到在build目录下已经构建好的文件了 其中child.js文件的内容如下

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var parent=require("./parent");
parent();
console.log("i am child");

},{"./parent":2}],2:[function(require,module,exports){
module.exports=function(){
    console.log("i am parent");
};

},{}]},{},[1])

该文件即可作为页面的引用文件直接执行。

运行结果如下：

　 i am parent

i am child

如果作为页面文件引入的话，可以在console中看到上述相同的效果。

学习之旅，有诸多不足之处，望多指教！By Ygh1224