在之前我多次提過如今關心的主要問題是，如何實現良好的效能以及你應該如何努力實現web頁面的快速響應。在我的一些關於JavsScript API的文章中，比如 介紹Resource Timing API 及 深入User Timing API，我對拖慢你的專案的根源進行了全面分析。在年前，Craig Buckler在他的文章-《The Complete Guide to Reducing Page Weight》中也涉及到這個話題。
如果你沒有停留在過去，你可能使用過一些任務自動管理工具（比如Grunt或Gulp）來改善我們的工作流程，它們可以自動完成我們之前要手動完成的工作。在這篇文章中我將會描述5個Grunt任務，幫助我們提高我們的網頁效能。
grunt-contrib-imagemin
我想說的第一個任務是grunt-contrib-imageimin。我想先討論它的原因是，圖片是拖慢網站效能的主要殺手！
如果你看過HTTParchive.org上的統計，你會發現圖片佔了整個頁面大小的63%還多。如此臃腫的原因是圖片通常沒有被壓縮到儘可能小的程度。grunt-contrib-imageimin是可以用來解決這個問題的其中一個任務。
這個任務擁有以下的一些優化器，它們可以壓縮web上的絕大多數圖片格式：
- gifsicle壓縮GIF圖片
- jpegtran壓縮JPEG圖片
- optipng壓縮PNG圖片
- svgo壓縮SVG圖片
該任務配置的一個示例如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
imagemin: { dist: { options: { optimizationLevel: 5 }, files: [{ expand: true, cwd: 'src/images', src: ['**/*.{png,jpg,gif}'], dest: 'dist/' }] } } |
這個配置可以通過使用optimizationLevel選項來實現高程度的優化。這個值範圍從0到7,預設為3。在這種情況下圖片優化指的是對那些圖片格式為png，jpg或gif，並且位於“src/images”資料夾及它的所有子資料夾的圖片進行優化。優化後的圖片將儲存在“dist”資料夾中。
grunt-contrib-uglify
grunt-contrib-uglify任務用來壓縮JavaScript檔案。這個任務刪除你原始碼中的所有不必要的空格，並且重新命名變數和函式以便使用盡可能短的名字。
你將會常常使用這個任務中的一些選項是sourceMap和banner。前者在同一目錄下建立一個源對映檔案作為目標檔案。為了啟用這個選項你必須設定它為true（預設值為false）。banner是壓縮輸出檔案的前置字串，你通常可以在那寫上你的檔案或庫或框架的名稱、它的版本、作者名和許可。
為了讓你對壓縮源有個認知，假設你擁有以下的程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 |
var MyApplication = function() { var data = 'hello'; this.sum = function(first, second) { return first + second; } this.showData = function() { return data; } }; |
壓縮過程會把上面的程式碼轉化為以下程式碼：
|
1 |
var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}}; |
這個工具的示例配置如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 |
uglify: { dist: { options: { sourceMap: true, banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */' }, files: { 'dest/output.min.js': ['src/input.js'], } } } |
grunt-contrib-cssmin
顧名思義，grunt-contrib-cssmin是用來壓縮CSS檔案的。跟grunt-contrib-uglify任務類似，它也提供一個banner選項。
這個任務的一個簡單配置為：
|
1 2 3 4 5 6 7 8 9 10 |
cssmin: { dist: { options: { banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */' }, files: { 'dist/css/style.min.css': ['src/css/**/*.css'] } } } |
這個例子壓縮儲存在”src/css”及其子資料夾的所有CSS檔案，並將結果儲存在一個命名為“style.min.css”的樣式表中，它位於“dist/css”資料夾下。另外，這個配置在這個壓縮檔案的頂部增加了一個banner。
grunt-uncss
另一個處理CSS的任務是grunt-uncss。這個任務從一個專案中刪除未使用的CSS，因此會減少了最終CSS檔案的大小，從而提高了下載時間。如果你正在使用一個像Bootstrap或Foundation的框架開發，它是特別適合的。通過閱讀官方文件，你會發現這個任務有一些重要的侷限性。
一些值得一提的不錯選項是ignore，它允許我們指定的選擇器列表不應該被刪除，ignoreSheets允許我們忽略指定樣式表。
一個使用這個任務的例子如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 |
uncss: { dist: { options: { ignore: [/js-.+/, '.special-class'], ignoreSheets: [/fonts.googleapis/], }, files: { 'dist/css/unused-removed.css': ['src/index.html', 'src/contact.html', 'src/service.html'] } } } |
grunt-contrib-htmlmin
在本文中我想討論的最後一個Grunt任務是grunt-contrib-htmlmin，這是一個用來壓縮HTML程式碼的任務。它不會對你的網站加速很多，因為它通常只可以為你節省幾Kb內容，如果你正使用gzip壓縮你的內容的話，它幫助甚至會更低。因此，如果你想要壓縮你的HTML，恩……祝賀你，這意味著你的網站已經優化的相當不錯啦。
儘管如此，在處理網站效能上要遵循的哲學是每個Kb都很重要。所以，讓我們看看將這個任務整合到我們的工作流的一個簡單的配置：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
htmlmin: { dist: { options: { removeComments: true, collapseWhitespace: true }, files: [{ expand: true, cwd: 'src', src: '**/*.html', dest: 'dist/' }] } } |
上面的程式碼處理所有放在“src”目錄及其子資料夾的頁面，對這些頁面中的每一個，這個任務刪除了它找到的所有註釋及不必要的空格。並將結果儲存在“dist”目錄中。
結語
在本文中，我向您介紹了可以輕鬆提高你的網站效能的五個Grunt任務。它們很簡單，你真的沒有藉口去不使用，不去用更快的服務提供使用者更好的體驗。我希望你喜歡這篇文章，並儘快應用。
你曾經用過它們麼？它們提高你的網站多少效能？有沒有一些其他你喜歡的任務記你想要與我們分享的呢？