知識星球
在之前我多次提過如今關心的主要問題是，如何實現良好的效能以及你應該如何努力實現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圖片
該任務配置的一個示例如下所示：
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是壓縮輸出檔案的前置字串，你通常可以在那寫上你的檔案或庫或框架的名稱、它的版本、作者名和許可。
為了讓你對壓縮源有個認知，假設你擁有以下的程式碼：
var MyApplication = function() {
var data = ‘hello’;
this.sum = function(first, second) {
return first + second;
}
this.showData = function() {
return data;
}
};
壓縮過程會把上面的程式碼轉化為以下程式碼：
var MyApplication=function(){var a=”hello”;this.sum=function(a,b){return a+b},this.showData=function(){return a}};
這個工具的示例配置如下所示：
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選項。
這個任務的一個簡單配置為：
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允許我們忽略指定樣式表。
一個使用這個任務的例子如下所示：
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都很重要。所以，讓我們看看將這個任務整合到我們的工作流的一個簡單的配置：
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: ‘src’,
src: ‘**/*.html’,
dest: ‘dist/’
}]
}
}
上面的程式碼處理所有放在“src”目錄及其子檔案夾的頁面，對這些頁面中的每一個，這個任務刪除了它找到的所有註釋及不必要的空格。並將結果儲存在“dist”目錄中。
結語
在本文中，我向您介紹了可以輕鬆提高你的網站效能的五個Grunt任務。它們很簡單，你真的沒有藉口去不使用，不去用更快的服務提供使用者更好的體驗。我希望你喜歡這篇文章，並儘快應用。
你曾經用過它們麼？它們提高你的網站多少效能？有沒有一些其他你喜歡的任務記你想要與我們分享的呢？
原文出處：Aurelio De Rosa
譯文出處：伯樂線上 – Martin