npm 包 gulp-h5packer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

gulp-h5packer 是一个可以将前端 HTML/CSS/JS 代码压缩、混淆、合并的 gulp 插件，可以将代码的体积减小，提升页面性能。

安装

安装 gulp-h5packer 只需要在命令行中运行以下命令：

npm install gulp-h5packer --save-dev

使用方法

压缩 HTML

压缩 HTML 只需要在 gulpfile.js 文件中的任务中使用 gulp-h5packer 插件即可。示例代码如下：

var gulp = require('gulp');
var h5packer = require('gulp-h5packer');

gulp.task('html', function () {
  return gulp.src('src/*.html')
    .pipe(h5packer.html())
    .pipe(gulp.dest('dist'))
});

我们可以使用以下配置压缩 HTML：

h5packer.html(options)

其中，options 是一个选项对象，可以包含以下内容：

removeComments: 是否删除 HTML 中的注释，默认为 true
collapseWhitespace: 是否将 HTML 中的空白字符压缩为一个空格，默认为 true
removeEmptyAttributes: 是否删除空属性，默认为 true
minifyJS: 是否压缩 HTML 中的 JS 代码，默认为 false
minifyCSS: 是否压缩 HTML 中的 CSS 代码，默认为 false

压缩 CSS

压缩 CSS 只需要在 gulpfile.js 文件中的任务中使用 gulp-h5packer 插件即可。示例代码如下：

var gulp = require('gulp');
var h5packer = require('gulp-h5packer');

gulp.task('css', function () {
  return gulp.src('src/*.css')
    .pipe(h5packer.css())
    .pipe(gulp.dest('dist'))
});

我们可以使用以下配置压缩 CSS：

h5packer.css(options)

其中，options 是一个选项对象，可以包含以下内容：

compatibility: 用于指定不同浏览器的 CSS 兼容性，默认为 'ie9'
level: 压缩 CSS 的级别，默认为 2，可选值有 0、1、2

压缩 JS

压缩 JS 只需要在 gulpfile.js 文件中的任务中使用 gulp-h5packer 插件即可。示例代码如下：

var gulp = require('gulp');
var h5packer = require('gulp-h5packer');

gulp.task('js', function () {
  return gulp.src('src/*.js')
    .pipe(h5packer.js())
    .pipe(gulp.dest('dist'))
});

我们可以使用以下配置压缩 JS：

h5packer.js(options)

其中，options 是一个选项对象，可以包含以下内容：

keep_fnames: 是否保留函数名，默认为 false
mangle: 是否混淆变量名，默认为 true
compress: 是否压缩代码，默认为 true
output: 导出模式，默认为 'text'，可选值有 'text'、'json'、'ast'

完整示例

最后，下面是一个完整的 gulpfile.js 文件示例，供参考：

-- -------------------- ---- -------
--- ---- - ----------------
--- -------- - -------------------------

----------------- -------- -- -
  ------ ----------------------
    ---------------------
      --------------- -----
      ------------------- -----
      ---------------------- -----
      --------- ------
      ---------- -----
    ---
    ------------------------
---

---------------- -------- -- -
  ------ ---------------------
    --------------------
      -------------- ------
      ------ -
    ---
    ------------------------
---

--------------- -------- -- -
  ------ --------------------
    -------------------
      ------------ ------
      ------- -----
      --------- -----
      ------- ------
    ---
    ------------------------
---

-------------------- ------------------- ------ -------

结语

gulp-h5packer 可以帮助我们在前端项目中压缩代码，提升页面性能，同时也可以帮助我们减小代码体积，加快页面加载速度。希望本篇文章能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/71050