在之前我多次提過如今關(guān)心的主要問題是，如何實現(xiàn)良好的性能以及你應(yīng)該如何努力實現(xiàn)web頁面的快速響應(yīng)。在我的一些關(guān)于JavsScript API的文章中，比如介紹Resource Timing API及深入User Timing API，我對拖慢你的項目的根源進(jìn)行了全面分析。在年前，Craig Buckler在他的文章-《The Complete Guide to Reducing Page Weight》中也涉及到這個話題。
如果你沒有停留在過去，你可能使用過一些任務(wù)自動管理工具（比如Grunt或Gulp）來改善我們的工作流程，它們可以自動完成我們之前要手動完成的工作。在這篇文章中我將會描述5個Grunt任務(wù)，幫助我們提高我們的網(wǎng)頁性能。
grunt-contrib-imagemin
我想說的第一個任務(wù)是grunt-contrib-imageimin。我想先討論它的原因是，圖片是拖慢網(wǎng)站性能的主要殺手！
如果你看過HTTParchive.org上的統(tǒng)計，你會發(fā)現(xiàn)圖片占了整個頁面大小的63%還多。如此臃腫的原因是圖片通常沒有被壓縮到盡可能小的程度。grunt-contrib-imageimin是可以用來解決這個問題的其中一個任務(wù)。
這個任務(wù)擁有以下的一些優(yōu)化器，它們可以壓縮web上的絕大多數(shù)圖片格式：
gifsicle壓縮GIF圖片
jpegtran壓縮JPEG圖片
optipng壓縮PNG圖片
svgo壓縮SVG圖片
該任務(wù)配置的一個示例如下所示：
imagemin: {dist: {options: {optimizationLevel: 5},files: [{expand: true,cwd: ’src/images’,src: [’**/*.{png,jpg,gif}’],dest: ’dist/’}]}}這個配置可以通過使用optimizationLevel選項來實現(xiàn)高程度的優(yōu)化。這個值范圍從0到7,默認(rèn)為3。在這種情況下圖片優(yōu)化指的是對那些圖片格式為png，jpg或gif，并且位于“src/images”文件夾及它的所有子文件夾的圖片進(jìn)行優(yōu)化。優(yōu)化后的圖片將存儲在“dist”文件夾中。
grunt-contrib-uglify
grunt-contrib-uglify任務(wù)用來壓縮JavaScript文件。這個任務(wù)刪除你源碼中的所有不必要的空格，并且重命名變量和函數(shù)以便使用盡可能短的名字。
你將會常常使用這個任務(wù)中的一些選項是sourceMap和banner。前者在同一目錄下創(chuàng)建一個源映射文件作為目標(biāo)文件。為了啟用這個選項你必須設(shè)置它為true（默認(rèn)值為false）。banner是壓縮輸出文件的前置字符串，你通�？梢栽谀菍懮夏愕奈募驇旎蚩蚣艿拿Q、它的版本、作者名和許可。
為了讓你對壓縮源有個認(rèn)知，假設(shè)你擁有以下的代碼：
var MyApplication = function() {var data = ’hello’; this.sum = function(first, second) {return first + second;} this.showData = function() {return data;}};壓縮過程會把上面的代碼轉(zhuǎn)化為以下代碼：
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任務(wù)類似，它也提供一個banner選項。
這個任務(wù)的一個簡單配置為：
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文件，并將結(jié)果存儲在一個命名為“style.min.css”的樣式表中，它位于“dist/css”文件夾下。另外，這個配置在這個壓縮文件的頂部增加了一個banner。
grunt-uncss
另一個處理CSS的任務(wù)是grunt-uncss。這個任務(wù)從一個項目中刪除未使用的CSS，因此會減少了最終CSS文件的大小，從而提高了下載時間。如果你正在使用一個像Bootstrap或Foundation的框架開發(fā)，它是特別適合的。通過閱讀官方文檔，你會發(fā)現(xiàn)這個任務(wù)有一些重要的局限性。
一些值得一提的不錯選項是ignore，它允許我們指定的選擇器列表不應(yīng)該被刪除，ignoreSheets允許我們忽略指定樣式表。
一個使用這個任務(wù)的例子如下所示：
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任務(wù)是grunt-contrib-htmlmin，這是一個用來壓縮HTML代碼的任務(wù)。它不會對你的網(wǎng)站加速很多，因為它通常只可以為你節(jié)省幾Kb內(nèi)容，如果你正使用gzip壓縮你的內(nèi)容的話，它幫助甚至?xí)�。因此，如果你想要壓縮你的HTML，恩……祝賀你，這意味著你的網(wǎng)站已經(jīng)優(yōu)化的相當(dāng)不錯啦。
盡管如此，在處理網(wǎng)站性能上要遵循的哲學(xué)是每個Kb都很重要。所以，讓我們看看將這個任務(wù)集成到我們的工作流的一個簡單的配置：
htmlmin: {dist: {options: {removeComments: true,collapseWhitespace: true},files: [{expand: true,cwd: ’src’,src: ’**/*.html’,dest: ’dist/’}]}}上面的代碼處理所有放在“src”目錄及其子文件夾的頁面，對這些頁面中的每一個，這個任務(wù)刪除了它找到的所有注釋及不必要的空格。并將結(jié)果存儲在“dist”目錄中。
結(jié)語
在本文中，我向您介紹了可以輕松提高你的網(wǎng)站性能的五個Grunt任務(wù)。它們很簡單，你真的沒有借口去不使用，不去用更快的服務(wù)提供用戶更好的體驗。我希望你喜歡這篇文章，并盡快應(yīng)用。
你曾經(jīng)用過它們么？它們提高你的網(wǎng)站多少性能？有沒有一些其他你喜歡的任務(wù)記你想要與我們分享的呢？ 共贏網(wǎng)絡(luò)-用心做好每一個網(wǎng)站-
聊城網(wǎng)站建設(shè)專家
