gulp 外掛程式之 gulp-htmlmin

標籤：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" 目錄和目標檔案。未完待續。。。

本文出自 “珞辰的部落格” 部落格，轉載請與作者聯絡！

gulp 外掛程式之 gulp-htmlmin