上一篇文章《简化js模块开发》说了一种简单的前端开发模式，但其中其中提到的支持工具却一直迟迟没有拿出来。那么今天就分享下。

基于模块化开发方式我们迫切需要的一个工具支持的功能就是文件监听以及文件合并。起初的想法是使用ant来做构建工具。因为ant是基于java的，所以想使用java来做文件目录监听功能，于是找到了jnotify.但是使用下来才发现这东西很有问题，作者也没在进行更新。

在此期间大楷同学一直推荐我使用nodejs来做，说什么文件监听神马的最容易了。但是我因为会点ant，所以还是没有打算放弃。后来在我极度纠结的情况下，小楷同学给我推荐了今天我要介绍的工具-grunt。就是因为这工具我放弃了ant，而且该工具比以前预想的更加完美，更加能适合这种场景需求，grunt基于nodejs更加符合前端攻城师的style。

那么我们就把今天的主角-grunt请出场。官网介绍Grunt-The JavaScript Task Runner。蓝狮注册登陆看到做任务什么的它最擅长了。只要给他定义好了一系列任务，那么那就会自动执行。如果你经常逛github，你如果留心就会发现很多前端开 源代码里都会有一个Gruntfile.js的文件。这个就是grunt的配置文件，把你的一些列任务在该文件中定义好那么到时候它就知道怎么执行了。

在我知道grunt以前，它就已经被别人频频使用在自己的项目中作为build工具。其中包括jQuery，twitter一系列的前端项目等。足 见该工具的优秀和可靠。虽然我一直在鼓吹grunt有多优秀你多应该试试，但是脱离了nodejs群体的力量，它也不足以成为一个好的工具。其实际上只是 一个包装器，容纳了nodejs第三方优秀的库。其中包括jslint，uglify，watch，concat，less，sass等等很多优秀的东 西。其更多插件可参看官网。接下来我们就来试一试该工具。

1.安装nodejs
在安装该工具之前你先要安装nodejs环境。可以去nodejs下载。安装好以后看看在命令行下能不能执行node命令了，如果可以那么就表示安装成功了.

2.安装grunt-cli
npm install -g grunt-cli
执行该命令来安装我们今天的主角grunt。

3.安装grunt插件
这里我们需要一下插件：
watch：一个文件目录监听的插件
concat：文件合并插件
基于上篇文章我们目前就需要这两个插件都可以了。这儿我们再加上uglify插件，用来对js代码进行美化和压缩。这个东西很火的。jquery目前也使 用的这个来压缩代码。还有一种简单的方法就是在你的工程目录下建立一个package.json的文件，这是npm安装的配置文件。把如下代码拷贝进去：

{
“name”: “learnGrunt”,
“version”: “v0.0.0”,
“devDependencies”: {
“grunt”: “~0.4.0”,
“grunt-contrib-uglify”: “~0.1.1”,
“grunt-contrib-concat”: “~0.1.3”,
“grunt-contrib-watch”: “~0.2.0”
}
}
然后把工具路径换到该目录，windows就是cd到该目录。然后执行：

npm install
这条命令就能把package.json里面依赖的包都安装在当前目录下node_module文件下。你也可以加-g参数来全局安装。
从package.json文件我们能够看到依赖的包:grunt-contrib-uglify,grunt-contrib-concat,grunt-contrib-watch以及对应的版本号。

4.编写task list-Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
watch: {
files: ‘src/.js’, tasks: [‘concat’] }, concat: { dist: { src: [‘src/utils/.js’],
dest: ‘dist/utils.js’
},
extras: {
src: [‘src/ui/*.js’],
dest: ‘dist/ui.js’
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-watch’);
grunt.registerTask(‘default’, [‘watch’]);
};
把以上代码保存为Gruntfile.js，保存在package同目录下。蓝狮官网这是一个基于js的配置文件，相比ant的xml来说，对前端就友好简 单得多了。上面的意思大概都能看明白，定义了一个concat和watch task。然后启动watch监听src目录下的js文件，如果文件改动则执行concat task，这样就立马进行了合并。到这里我想要的功能已经达成了。多简单啊。

5.启动grunt task
grunt
grunt命令就会执行你Gruntfile.js里定义的task。到这儿一些就就绪了，当你改动监听目录下的文件，那么就立马会进行合并。

到这里你大概已经看到了该工具简单但强大之处了吧。如果你对css预处理该兴趣，你同样可以加上grunt-contrib- less,grunt-contrib-sass，grunt-contrib-styus等插件来满足自己的需要。具体插件的使用官网都有介绍。 grunt现在包装好的插件已经非常全面了，基本能满足你所有的要求。而且还在不断扩充。

到这里就算介绍完毕了，同时强烈建议大家使用，谁说咱们前端一定要用java，python来做这些事情呀。同时为nodejs鼓掌，它让前端世界更丰富多彩了。

http://leechan.me/?p=1254

标签：grunt, 前端开发