Grunt是一个运行在Node.js平台上的基于任务的JavaScript项目命令行构建工具。Grunt可以从模板快速创建项目，合并、缩小和验证CSS和JS文件，运行单元测试并启动静态服务器。上一篇《Grunt：基于任务的 JavaScript 项目构建工具》介绍了Grunt安装和创建项目框架的步骤，本文介绍如何使用Grunt合并文件。Grunt内置了concat（文件合并）、lint（代码验证）和min（代码压缩）任务。在grunt.js文件中配置任务后，运行grunt命令自动完成一系列工程构建操作，如图：对应的Grunt配置文件代码如下：/*globalmodule:false*/module。exports=function(grunt){//Projectconfiguration.grunt.initConfig({pkg:'',meta:{banner:'/*!<%=pk??g.title||pkg.name%>-v<%=pk??g.version%>-'+'<%=grunt.template.today("yyyy-mm-dd")%>\n'+'<%=pk??g.homepage?"*"+pkg.homepage+"\n":""%>'+'*版权所有(c)<%=grunt.template.today("yyyy")%><%=pk??g.author.name%>;'+'许可<%=_.pluck(pkg.licenses,"type").join(",")%>*/'},concat:{dist:{src:['','.js>'],dest:'dist/<%=pk??g.name%>.js'}},min:{dist:{src:['<横幅:meta.banner>',''],dest:'dist/<%=pk??g.name%>.min.js'}},qunit:{files:['test/**/*.html']},lint:{文件:['grunt.js','src/**/*.js','test/**/*.js']},watch:{files:'',tasks:'lintqunit'},jshint:{options:{curly:true,eqeqeq:true,immed:true,latedef:true,newcap:true,noarg:true,sub:true,undef:true,boss:true,eqnull:true,browser:true},globals:{jQuery:true}},uglify:{}});//Defaulttask.grunt.registerTask('default','lintqunitconcatmin');};本文首先介绍concat任务，接下来的几个任务会Grunt合并文件，后续文章会介绍。Grunt内置的concat任务用于将一个或多个文件（或指令，例如指令）合并到一个文件中。concat任务的项目配置框架：//项目配置grunt.initConfig({//项目元数据，用于指令meta:{},//待合并文件列表concat:{}});基本使用将src目录下的intro.js、project.js、outro.js三个文件合并到built.js文件中，存放在dist目录下。配置示例：grunt.initConfig({concat:{dist:{src:['src/intro.js','src/project.js','src/outro.js'],dest:'dist/built.js'}}});添加注释也可以在合并后的文件中通过指令添加注释，如包名、版本、构建时间等，示例代码：grunt.initConfig({pkg:'',meta:{banner:'/*!<%=pk??g.name%>-v<%=pk??g.version%>-'+'<%=grunt.template.today("yyyy-mm-dd")%>*/'},concat:{dist:{src:['',''],dest:'dist/built.js'}}});多个构建目标在实际项目中，经常需要按模块生成多个目标文件，例如基础模块和插件模板分别打包。配置示例：grunt.initConfig({concat:{basic:{src:['src/main.js'],dest:'dist/basic.js'},extras:{src:['src/main.js','src/extras.js'],dest:'dist/with_extras.js'}}});动态文件名Grunt合并任务也可以生成动态文件名，grunt.initConfig({pkg:'',dirs:{src:'src/files',dest:'dist/<%=pk??g.name%>/<%=pk??g.version%>'},concat:{basic:{src:['<%=dirs.src%>/main.js'],dest:'<%=dirs.dest%>/basic。js'},extras:{src:['<%=dirs.src%>/main.js','<%=dirs.src%>/extras.js'],dest:'<%=dirs.dest%>/with_extras.js'}}});配置完成后，运行如下命令进行文件合并：合并后的代码示例如下：/*!Gruntdemo-v0.1.0-2013-01-22*https://github.com/dreamsky/grunt-demo*Copyright(c)2013AndyLi;LicensedMIT*/(function($){//Collectionmethod.$.fn.awesome=function(){returnthis.each(function(){$(this).html('awesome');});};//Staticmethod.$.awesome=function(){return'awesome';};//Customselector.$.expr[':'].awesome=function(elem){returnelem.textContent.indexOf('awesome')>=0;};}(jQuery));原文链接：http://www.cnblogs.com/lhb25/archive/2013/01/31/grunt-for-javascript-project-b.html
