在使用grunt之前，项目静态文件几乎没进行压缩合并便直接放到线上，部分文件手动复制粘贴到某压缩网站进行压缩。没压缩合并的文件显然耗资源，手动压缩的文件后期不易维护，每修改一次便要重复复制粘贴，很不方便。grunt的加入帮忙解决了以上问题，让开发人员更加专注于开发。这里有一篇很好地教会我们如何搭建grunt环境，而我这有部分插件的可供参考学习。

的入门文档写得很详细，建议阅读并动手一遍。 网上有人会纠结该用grunt还是glup。个人认为，其实无论是grunt还是glup都是构建工具，基本的功能都差不多，与其浪费时间纠结该使用哪个，还不如先开始选择一个使用，等过段时间熟悉后再考虑是否接触另一个，最后再比较出哪个更适合自己岂不更好。

我开始使用grunt的时候只是用来对css，js文件进行合并压缩，使用到的插件分别如下：

"devDependencies": {  "grunt": "^0.4.5",  "grunt-contrib-clean": "^0.6.0",  "grunt-contrib-concat": "^0.5.1",  "grunt-contrib-cssmin": "^0.14.0",  "grunt-contrib-uglify": "^0.10.0",  "grunt-contrib-watch": "^0.6.1"}

我先通过watch监控静态文件，一旦文件有改动并保存，便用concat把css或js目录下的文件进行了合并，再用cssmin或uglify把刚刚合并的文件压缩，最后用clean把合并但未压缩的文件删除掉。部分代码（以js为例）如下：

// 文件合并concat: {  js: {    files: {      'dest/js/index.js': ['src/js/index/*.js']    }  }},// 压缩js代码uglify: {  build: {    expand: true,    cwd: 'dest/js',    src: ['**/*.js', '!*.min.js'],    dest: 'dest/js',    ext: '.min.js'  }},// 删除多余的文件clean: {  js: ['dest/js/*js', '!dest/js/*.min.js']},// 文件监控watch: {  js: {    files: 'src/js/**/*.js',    tasks: ['concat:js', 'uglify', 'clean:js']  }}

后来发现cssmin和uglify其实已包含了合并的功能，于是乎把concat和clean给移除掉，因为它们功能重复了。代码如下：

// 合并压缩js代码uglify: {  build: {    files: {      'dest/js/index.min.js': ['src/js/index/*.js']    }  }}

是的，用了cssmin和uglify后在浏览器的调试工具下便无法定位到源代码处，这是有办法解决的。办法就是使用source map，chrome和firefox的调试工具都支持，具体详情请移步。

使用了cssmin和uglify之初项目还不算大的时候，你也许已经发现了一个现象。那就是我们每次一修改保存文件的时候，watch插件便会立马调用cssmin和uglify。而它们在配置里是对所有的css和js文件进行操作，虽然只对其中一个文件修改，但是目录下的所有文件都会大动干戈地进行合并压缩。配置高的电脑还行，配置低的电脑就悲剧了，至少我试过每次一保存文件都要等待个两三秒钟后合并压缩完成才能去刷新浏览器。一旦静态文件多起来，那这等待的时候只会增多不会减少。后来我找到了这个插件来缓解燃眉之急。newer只会对改动的文件进行操作，这样至少不会每次保存都对全部文件进行操作。它的使用方法很简单：

// 监控watch: {  js: {    files: 'src/js/**/*.js',    tasks: ['newer:uglify']  }}

以上便是我目前用于项目的阶段，而此时我做进行开发的项目中主要用了类似于thinkPHP的框架，于是添加css或js外部文件是在php代码里添加，如下：

    addMoreCss('dest/index.min.css');  $this->addMoreJs('dest/index.min.js');?>

这样虽然开发使用到的文件跟上线的文件一致，但也有一些弊端，比如每次改动保存静态文件便会去执行合并压缩代码，我们每天都在时时刻刻地用ctrl+s，这是没有必要的。我们应该只在准备发版上线的时候才去合并压缩。但这时如果在开发时使用原始文件则会是这样：

    addMoreCss('src/index/test1.css');  $this->addMoreCss('src/index/test2.css');  $this->addMoreCss('src/index/test3.css');  $this->addMoreJs('src/index/test1.js');  $this->addMoreJs('src/index/test2.js');?>

上面一段代码在上线时是需要注释掉的，那在修复时又要重新打开这份代码，注释掉上面上线使用的代码。如果涉及到多个页面的修改，那得手动打开很多份类似这样的代码，而在修复完成后又得重新重复地进行注释和打开上线代码。万一有哪一段代码没看见忘了就不好了。

所以接下来我打算在grunt中使用和，这样在php函数都只需要引入一个入口文件，然后sass通过import，requirejs通过require便可去加载它们需要的文件。具体结果得等我实践后才知道，但我相信如果ok的话我便可以移除cssmin和uglify两个插件，因为sass和requirejs也有合并压缩的功能。

    addMoreCss('src/main.css');  $this->addMoreJs('src/main.js');  // 上线  $this->addMoreCss('dest/main.css');  $this->addMoreJs('dest/main.js');?>