gulp 插件之 gulp-htmlmin

gulp-htmlmin 的簡介：

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

一、gulp-htmlmin 插件的使用

1、安裝 “gulp-htmlmin”插件命令（在終端進入到項目根目錄執行）

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

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

            mkdir src

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

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

4、最后在終端運行 "gulp htmlmin" 命令

PS：如果沒有錯誤提示信息，證明就沒什么問題了。現在去項目根目錄下看是否生成 "dist/html" 目錄和目標文件。未完待續。。。