在吉特倉儲管理系統開發的過程當中大量使用到了JS,隨着JS文件的增多咱們須要對JS進行有效的管理,同時也要對JS文件進行一些壓縮。文本用於記錄一下使用grunt壓縮JS的操做步驟,便於遺忘以後記錄查找,文章內容很是淺顯。node
一. 什麼是gruntgit
JavaScript世界的構建工具,官網上是這麼描述的,姑且這麼描述,我的感受還比較好用。官網地址: http://www.gruntjs.net/ 更多的參考資料也能夠查詢官網github
二. 安裝gruntnpm
Grunt和Grunt插件是經過npm安裝並管理的,npm是Node.js的一個包管理器,不理解的能夠查看NodeJS 的相關資料。本文操做都是在Windows系統環境中操做,其餘的操做系統命令行可能稍微有點不同。(若是沒有nodejs環境的請先安裝nodejs環境)json
npm install -g grunt-cli
在CMD命令窗口中輸入如上命令,grunt命令就會加入到你的系統路徑中,後面你就能夠可使用grunt命令構建壓縮JavaScript了。數組
上面的命令是按照grunt-cli,可是這並不等於按照了grunt,grunt-cli用於協調調用任務的。編輯器
三. 項目準備ide
在編輯JS的時候我使用的sublime編輯器,這個編輯很是的不錯,我的比較喜歡這個編輯器grunt
如上圖是在吉特倉儲管理系統開發的過程當中使用到的部分JS截圖,在這裏咱們將處理如何壓縮這些JS文件。在使用grunt壓縮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" }
在項目中安裝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" } }
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 的壓縮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