天天看点

JavaScript 项目构建工具 Grunt 实践:合并文件

  

JavaScript 项目构建工具 Grunt 实践:合并文件

  Grunt 内置 concat(文件合并)、lint(代码校验) 和 min(代码压缩) 任务,在 grunt.js 文件配置好任务后,运行 grunt 命令就可以自动完成一系列的项目构建操作了,如图示:

JavaScript 项目构建工具 Grunt 实践:合并文件

  对应的 Grunt 配置文件代码如下:

  这篇文章先介绍 concat 任务,后面几个任务将会在随后的文章陆续介绍。

  Grunt 内置的 concat 任务用于合并一个或者多个文件(或者指令,例如<banner>指令)到一个文件。concat 任务的项目配置框架:

  把 src 目录下的 intro.js、projject.js、outro.js 三个文件合并到 built.js 文件并存放在 dist 目录,配置示例:

  还可以通过 <banner> 指令在合并文件中添加注释,例如包名、版本、生成时间等,示例代码:

   在实际项目中,往往需要根据模块生成多个目标文件,例如基础模块和插件模板分开打包,配置示例:

  Grunt 合并任务还可以生成动态的文件名,

  配置好以后,运行下面的命令就可以进行文件合并操作了:

  合并后的代码示例如下:

<a href="http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html" target="_blank">经典的白富美型 jQuery 图片轮播插件</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html" target="_blank">精心挑选的优秀 jQuery Ajax 分页插件</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/09/27/10-css3-online-generator-tools.html" target="_blank">十款精心挑选的在线CSS3代码生成工具</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html" target="_blank">让人爱不释手的13套精美网页图标素材</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html" target="_blank">10套精美的免费网站后台管理系统模板</a>

欢迎任何形式的转载,但请务必注明出处。

继续阅读