gulp 插件之 gulp-htmlmin

gulp-htmlmin 的簡(jiǎn)介：

            gulp-htmlmin 插件用來壓縮 html 文件，可以壓縮頁(yè)面 javascript，css，去除頁(yè)面空格，注釋，刪除多余屬性等操作。

一、gulp-htmlmin 插件的使用

1、安裝 “gulp-htmlmin”插件命令（在終端進(jìn)入到項(xiàng)目根目錄執(zhí)行）

            npm install --save-dev  gulp-load-plugins gulp-htmlmin

2、在項(xiàng)目根目錄下提供 "gulp-htmlmin" 插件任務(wù)配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-htmlmin"

 具體示例：
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();    // 裝載插件
      
gulp.task('htmlmin', function () {               // 自定義 "htmlmin" 任務(wù)
    return gulp.src('src/html/*.html')          // 模糊匹配 src/html 目錄下所有 html 文件
        .pipe(plugins.htmlmin({
                        removeComments: true,                      // 清除 HTML 注釋
                        collapseWhitespace: true,                    // 省略空白
                        collapseBooleanAttributes: true,          // 省略所有標(biāo)簽內(nèi)的布爾屬性
                        removeEmptyAttributes: true,              // 清除所有標(biāo)簽內(nèi)值為空的屬性
                        removeScriptTypeAttributes: true,       // 清除 <script> 標(biāo)簽內(nèi)的 type 屬性
                        removeStyleLinkTypeAttributes: true,  // 清除 <style> 和 <link> 標(biāo)簽內(nèi)的 type 屬性
                        minifyJS: true,                                       // 壓縮 html 頁(yè)面內(nèi)的 js 代碼
                        minifyCSS: true                                     // 壓縮 html 頁(yè)面內(nèi)的 css 代碼
                        
        }))
        .pipe(gulp.dest('dist/html'));             // 壓縮后的文件存放路徑
});

4、最后在終端運(yùn)行 "gulp htmlmin" 命令

PS：如果沒有錯(cuò)誤提示信息，證明就沒什么問題了。現(xiàn)在去項(xiàng)目根目錄下看是否生成 "dist/html" 目錄和目標(biāo)文件。未完待續(xù)。。。