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