gulp-htmlmin壓縮html的gulp插件實例代碼
通過一條命令用Npm安裝gulp-htmlmin:
npm install gulp-htmlmin --save-dev
安裝完畢后，打開gulpfile.js文件，我們里面編寫一個task用來專門壓縮html,并對html進行一系列的處理：
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('html',function(){
var options = {
collapseWhitespace:true,
collapseBooleanAttributes:true,
removeComments:true,
removeEmptyAttributes:true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true,
minifyJS:true,
minifyCSS:true
};
gulp.src('app/**/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dest/'));
});
我們看到task里面有個設(shè)置選項，分別介紹一下他們的屬性的作用：
1.collapseWhitespace:從字面意思應(yīng)該可以看出來，清除空格，壓縮html，這一條比較重要，作用比較大，引起的改變壓縮量也特別大；
2.collapseBooleanAttributes:省略布爾屬性的值，比如：<input checked="checked"/>,那么設(shè)置這個屬性后，就會變成 <input checked/>;
3.removeComments:清除html中注釋的部分，我們應(yīng)該減少html頁面中的注釋。
4.removeEmptyAttributes:清除所有的空屬性，
5.removeSciptTypeAttributes:清除所有script標簽中的type="text/javascript"屬性。
6.removeStyleLinkTypeAttributes:清楚所有Link標簽上的type屬性。
7.minifyJS:壓縮html中的javascript代碼。
8.minifyCSS:壓縮html中的css代碼。
總之，壓縮Html的原則就是清除沒用的代碼，刪除本就默認值的屬性，將html壓縮的最小，這樣才能提高項目運行的性能。
相關(guān)文章
實例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運行機制大家都應(yīng)該有所了解了吧，其實javascript是一個單線程的機制，但是因為隊列的關(guān)系它的表現(xiàn)會讓我們感覺是一個多線程的錯覺。下面這篇文章通過實例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料，需要的朋友可以參考下。2017-07-07
探討：JavaScript ECAMScript5 新特性之get/set訪問器
這篇文章主要介紹了探討：JavaScript ECAMScript5 新特性之get/set訪問器 的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
null 是一種原始類型，表示有意不包含任何對象值，在這篇文章中，你將學(xué)習(xí)關(guān)于 JavaScript 中的 null 的一切: 它的含義，如何檢測它，null 和 undefined 之間的區(qū)別，以及為什么大量使用 null 會造成代碼維護困難等，需要的朋友可以參考下2022-09-09
ant design下運用js實現(xiàn)框選功能，這篇文章主要介紹了ant design實現(xiàn)圈選功能,本文通過實例代碼截圖的形式給大家介紹的非常詳細，需要的朋友可以參考下2019-12-12
javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對象方法解析
本文主要對javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對象方法進行解析，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
小程序根據(jù)手機機型設(shè)置自定義底部導(dǎo)航距離
這篇文章主要為大家詳細介紹了小程序根據(jù)手機機型設(shè)置自定義底部導(dǎo)航距離，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
本文主要介紹js中call與apply關(guān)鍵字的作用以及它們的用法,具體實例如下,希望對大家有所幫助2016-11-11
本文主要介紹了JavaScript 事件對內(nèi)存和性能的影響。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
Object是JavaScript基本數(shù)據(jù)類型之一（function也屬于object，是特殊的object）,其存儲于堆中,這篇文章主要給大家介紹了關(guān)于Js中安全獲取Object深層對象的相關(guān)資料,需要的朋友可以參考下2021-09-09