天天看點

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>

歡迎任何形式的轉載,但請務必注明出處。

繼續閱讀