吉特倉儲管系統(開源)--使用Grunt壓縮JS檔案

賀臣發表於2017-02-04
JS

 

　　在吉特倉儲管理系統開發的過程中大量使用到了JS,隨著JS檔案的增多我們需要對JS進行有效的管理,同時也要對JS檔案進行一些壓縮。文字用於記錄一下使用grunt壓縮JS的操作步驟,便於遺忘之後記錄查詢,文章內容非常淺顯。

 

　　一. 什麼是grunt

　　　　JavaScript世界的構建工具,官網上是這麼描述的,姑且這麼描述,個人感覺還比較好用。官網地址: http://www.gruntjs.net/  更多的參考資料也可以查詢官網

 

　　二. 安裝grunt

　　　　Grunt和Grunt外掛是通過npm安裝並管理的,npm是Node.js的一個包管理器,不理解的可以檢視NodeJS 的相關資料。本文操作都是在Windows系統環境中操作,其他的作業系統命令列可能稍微有點不一樣。(如果沒有nodejs環境的請先安裝nodejs環境)

npm install -g grunt-cli

　　　　在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專案對應的根目錄。

　　　　在此目錄下輸入命令列

G:\Mui\gitwms>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gitwms)
version: (1.0.0)
description:
entry point: (index.js)
test command: ""
git repository:
keywords: gitwms
author: hechen
license: (ISC)
About to write to G:\Mui\gitwms\package.json:

{
  "name": "gitwms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "keywords": [
    "gitwms"
  ],
  "author": "hechen",
  "license": "ISC"
}


Is this ok? (yes) yes
初始化程式碼

　　　　在命令列輸入npm init 後會自動生成package.json檔案,生成的檔案內容如下：

{
  "name": "gitwms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "keywords": [
    "gitwms"
  ],
  "author": "hechen",
  "license": "ISC"
}
package.json檔案內容

 　　　　在專案中安裝grunt，使用如下的命令,如果安裝成功命令列中會顯示相關成功的資訊。

npm install grunt --save-dev

　　　　grunt 本身不會壓縮JS檔案，我們需要使用grunt的外掛grunt-contrib-uglify 來處理檔案的壓縮

npm install grunt-contrib-uglify --save-dev

 　　　　安裝好grunt 以及壓縮的外掛之後，我們會發現package.json檔案內容會發生一些變化

{
  "name": "gitwms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "keywords": [
    "gitwms"
  ],
  "author": "hechen",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0"
  }
}
更新之後package.json

　　　　devDependencies 之後的內容發生了變化,指向了grunt的依賴。

　　　　在專案的根目錄新建檔案Gruntfile.js, 然後將如下程式碼複製到該JS檔案中。

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'customer/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 載入包含 "uglify" 任務的外掛。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 預設被執行的任務列表。
  grunt.registerTask('default', ['uglify']);

};
配置外掛檔案

　　　　先不管該程式碼的意思,在專案根目錄下執行grunt命令 (CMD命令視窗中執行)

G:\Mui\gitwms>grunt
Running "uglify:build" (uglify) task
>> Destination build/gitwms.min.js not written because src files were empty.
>> No files created.

　　　　命令列輸出錯誤資訊,沒有壓縮建立檔案成功。這個主要是Gruntfile.js中的檔案配置錯誤引起的

　　　　src: 'customer/<%= pkg.name %>.js',   這裡找不到src 對應的目錄下的檔案，修改程式碼如下：

build: {
        src: 'customer/*.js',
        dest: 'build/<%= pkg.name %>.min.js'
}

　　　　然後再次執行grunt 命令,發現在根目錄下建立了一個build資料夾，並且生成了一個gitwms.min.js 的壓縮ＪＳ檔案。在這裡grunt壓縮JS檔案的操作任務成功了。

 

　　四. 檔案被合併了

　　　　上面的操作執行成功,但是多個檔案被壓縮成了一個檔案,我們需要每個檔案壓縮成一個檔案。修改Gruntfile.js檔案內容如下：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      /*build: {
        src: 'customer/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }*/
      my_target:{
        files:[
          {expand:true,cwd:"customer/",src:"*.js",dest:"build/",ext:".<%= pkg.version %>.min.js"},
          {expand:true,cwd:"customer/User/",src:"*.js",dest:"build/User/",ext:".<%= pkg.version %>.min.js"},
        ]
      }
    }
  });

  // 載入包含 "uglify" 任務的外掛。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 預設被執行的任務列表。
  grunt.registerTask('default', ['uglify']);

};
不同目錄檔案壓縮配置

　　　　編輯上述程式碼之後再次使用grunt命令進行壓縮檔案,發現生成了兩個目錄。但是同一個目錄的檔案還是被壓縮成了一個檔案,而且檢視檔名稱存在較大的問題。

上面被壓縮的程式碼並不是我們想要的,檔案還是被合併了。導致這個問題的原因是JS原始檔的命名 . 導致的。 這裡修改程式碼如下：

{expand:true,cwd:"customer/",src:"*.js",dest:"build/",ext:".<%= pkg.version %>.min.js",extDot:"last"},
{expand:true,cwd:"customer/User/",src:"*.js",dest:"build/User/",ext:".<%= pkg.version %>.min.js",extDot:"last"},

　　　　重新執行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中。後面就可以使用<% %>模板字串引用任意的配置屬性。

 

 


作者：情緣
出處：http://www.cnblogs.com/qingyuan/
關於作者：從事倉庫，生產軟體方面的開發，在專案管理以及企業經營方面尋求發展之路
版權宣告：本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結。
聯絡方式: 個人QQ  821865130 ; 倉儲技術QQ群 88718955,142050808 ;
吉特倉儲管理系統 開源地址: https://github.com/hechenqingyuan/gitwms

 

相關文章