gulp 插件之 gulp-htmlmin

gulp-htmlmin 的簡介：

            gulp-htmlmin 插件用來壓縮 html 文件，能夠壓縮頁面 javascript，css，去除頁面空格，註釋，刪除多餘屬性等操做。

1、gulp-htmlmin 插件的使用

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

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

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

            mkdir src

三、在 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'));             // 壓縮後的文件存放路徑
});

四、最後在終端運行 "gulp htmlmin" 命令

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