gulp-htmlmin壓縮html的gulp插件實(shí)例代碼
通過一條命令用Npm安裝gulp-htmlmin:
npm install gulp-htmlmin --save-dev
安裝完畢后，打開gulpfile.js文件，我們里面編寫一個(gè)task用來專門壓縮html,并對(duì)html進(jìn)行一系列的處理：
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里面有個(gè)設(shè)置選項(xiàng)，分別介紹一下他們的屬性的作用：
1.collapseWhitespace:從字面意思應(yīng)該可以看出來，清除空格，壓縮html，這一條比較重要，作用比較大，引起的改變壓縮量也特別大；
2.collapseBooleanAttributes:省略布爾屬性的值，比如：<input checked="checked"/>,那么設(shè)置這個(gè)屬性后，就會(huì)變成 <input checked/>;
3.removeComments:清除html中注釋的部分，我們應(yīng)該減少html頁面中的注釋。
4.removeEmptyAttributes:清除所有的空屬性，
5.removeSciptTypeAttributes:清除所有script標(biāo)簽中的type="text/javascript"屬性。
6.removeStyleLinkTypeAttributes:清楚所有Link標(biāo)簽上的type屬性。
7.minifyJS:壓縮html中的javascript代碼。
8.minifyCSS:壓縮html中的css代碼。
總之，壓縮Html的原則就是清除沒用的代碼，刪除本就默認(rèn)值的屬性，將html壓縮的最小，這樣才能提高項(xiàng)目運(yùn)行的性能。
相關(guān)文章
Javascript模擬加速運(yùn)動(dòng)與減速運(yùn)動(dòng)代碼分享
這篇文章主要介紹了Javascript加速運(yùn)動(dòng)與減速運(yùn)動(dòng)代碼分享,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JavaScript命令模式原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript命令模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
比較漂亮的qq在線客服代碼，推薦使用2008-10-10
js寫出遮罩層登陸框和對(duì)聯(lián)廣告并自動(dòng)跟隨滾動(dòng)條滾動(dòng)
這篇文章主要介紹了js寫出遮罩層登陸框和對(duì)聯(lián)廣告并自動(dòng)跟隨滾動(dòng)條滾動(dòng),需要的朋友可以參考下2014-04-04
Cookie 經(jīng)常用，也就是把關(guān)鍵信息記錄進(jìn)去，確認(rèn)不在保留信息，則設(shè)置使之過期。2010-04-04
js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序progress組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
js利用clipboardData實(shí)現(xiàn)截屏粘貼功能
這篇文章主要為大家詳細(xì)介紹了js利用clipboardData實(shí)現(xiàn)截屏粘貼功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript電子時(shí)鐘倒計(jì)時(shí)第二款
這篇文章主要介紹了JavaScript電子時(shí)鐘倒計(jì)時(shí)的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-01-01
前端實(shí)現(xiàn)Word在線預(yù)覽功能詳解
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時(shí)會(huì)遇到需要給用戶創(chuàng)建word文檔并實(shí)現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下2023-09-09