在吉特倉儲管理系統開發的過程中大量使用到了JS,随着JS檔案的增多我們需要對JS進行有效的管理,同時也要對JS檔案進行一些壓縮。文本用于記錄一下使用grunt壓縮JS的操作步驟,便于遺忘之後記錄查找,文章内容非常淺顯。
一. 什麼是grunt
二. 安裝grunt
Grunt和Grunt插件是通過npm安裝并管理的,npm是Node.js的一個包管理器,不了解的可以檢視NodeJS 的相關資料。本文操作都是在Windows系統環境中操作,其他的作業系統指令行可能稍微有點不一樣。(如果沒有nodejs環境的請先安裝nodejs環境)
在CMD指令視窗中輸入如上指令,grunt指令就會加入到你的系統路徑中,後面你就可以可以使用grunt指令建構壓縮JavaScript了。
上面的指令是按照grunt-cli,但是這并不等于按照了grunt,grunt-cli用于協調調用任務的。
三. 項目準備
在編輯JS的時候我使用的sublime編輯器,這個編輯非常的不錯,個人比較喜歡這個編輯器
如上圖是在吉特倉儲管理系統開發的過程中使用到的部分ＪＳ截圖,在這裡我們将處理如何壓縮這些ＪＳ檔案。在使用ｇｒｕｎｔ壓縮JS的時候我們需要兩個檔案package.json 和 Gruntfile。
package.json 用于npm存儲項目的中繼資料,可以設定項目的描述資訊以及項目依賴的grunt以及grunt插件。
Gruntfile 可以使用Gruntfile.js或者Gruntfile.coffee，個人喜歡使用Gruntfile.js檔案,這個檔案用于配置和定義任務并加重Grunt插件的。
在CMD指令行中進入到JS項目對應的根目錄。
在此目錄下輸入指令行
初始化代碼
在指令行輸入npm init 後會自動生成package.json檔案,生成的檔案内容如下：
package.json檔案内容
在項目中安裝grunt，使用如下的指令,如果安裝成功指令行中會顯示相關成功的資訊。
grunt 本身不會壓縮JS檔案，我們需要使用grunt的插件grunt-contrib-uglify 來處理檔案的壓縮
安裝好grunt 以及壓縮的插件之後，我們會發現package.json檔案内容會發生一些變化
更新之後package.json
devDependencies 之後的内容發生了變化,指向了grunt的依賴。
在項目的根目錄建立檔案Gruntfile.js, 然後将如下代碼複制到該JS檔案中。
配置插件檔案
先不管該代碼的意思,在項目根目錄下執行grunt指令 (CMD指令視窗中執行)
指令行輸出錯誤資訊,沒有壓縮建立檔案成功。這個主要是Gruntfile.js中的檔案配置錯誤引起的
src: 'customer/<%= pkg.name %>.js', 這裡找不到src 對應的目錄下的檔案，修改代碼如下：
然後再次運作grunt 指令,發現在根目錄下建立了一個build檔案夾，并且生成了一個gitwms.min.js 的壓縮ＪＳ檔案。在這裡grunt壓縮JS檔案的操作任務成功了。
四. 檔案被合并了
上面的操作執行成功,但是多個檔案被壓縮成了一個檔案,我們需要每個檔案壓縮成一個檔案。修改Gruntfile.js檔案内容如下：
不同目錄檔案壓縮配置
編輯上述代碼之後再次使用grunt指令進行壓縮檔案,發現生成了兩個目錄。但是同一個目錄的檔案還是被壓縮成了一個檔案,而且檢視檔案名稱存在較大的問題。
上面被壓縮的代碼并不是我們想要的,檔案還是被合并了。導緻這個問題的原因是JS源檔案的命名 . 導緻的。 這裡修改代碼如下：
重新運作grunt 指令現在可以滿足要求了。這裡主要使用到了extDot 屬性。extDot:first：表示以檔案名後的第一個點後面開始作為字尾名;last：表示以檔案名後的最後一個點後面開始作為字尾名。
files 中屬性說明:
expand： 值 true 或 false ,如果設定為true 辨別後面檔案名的占位符(*)都要具象到具體的檔案
cwd: 需要輸出的處理檔案目錄
src: 需要比對的檔案,和cwd相對,如果是數組形式,數組每一個item都是一個檔案名(可以使用通配符)
dest:壓縮生成的檔案路徑字首
ext: 處理之後的檔案字尾名
extDpt: first 表示源檔案名的第一個. 後面的開始作為字尾名 | last 表示源檔案名的最後一個. 後面的開始作為字尾名
flatten: 删除所有生成的dest的路徑部分,值為boolean類型（true、false）用來指定是否保持檔案目錄結構,true是保持檔案目錄
五. 配置簡單說明
pkg: grunt.file.readJSON('package.json')
用于讀取package.json中的内容，并且可以指派到pkg中。後面就可以使用<code><% %></code>模闆字元串引用任意的配置屬性。
關于作者：從事倉庫，生産軟體方面的開發，在項目管理以及企業經營方面尋求發展之路
版權聲明：本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結。
聯系方式: 個人QQ 821865130 ; 倉儲技術QQ群 88718955,142050808 ;