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

前言

在前端开发过程中，我们经常需要对 CSS、JavaScript、HTML 等静态资源进行压缩，以减小文件大小，提高网站的加载速度。而 harp-minify 就是一款基于 harp.js 的静态资源压缩工具。

harp-minify 是什么？

harp-minify 是 harp.js 的一个插件，它可以对 CSS、JavaScript、HTML 等静态资源进行压缩，同时还可以自动为 CSS 文件添加前缀、为图片生成 webp 格式等。

安装

使用 npm 安装 harp-minify：

npm install -g harp-minify

使用教程

压缩 CSS

在 harp 项目中新建 public/css/index.css 文件：
```
body {
  background: #fff;
  font-size: 16px;
}
```
在终端中进入项目根目录，执行以下命令进行压缩：
```
harp compile -o public --with  minify
```
此时会在 public/css 目录下生成 index.min.css 文件，内容为：
```
body{background:#fff;font-size:16px}
```

压缩 JavaScript

在 harp 项目中新建 public/js/index.js 文件：

function hello(name) {
 console.log(`Hello, ${name}!`)
}

hello('harp-minify')

在终端中进入项目根目录，执行以下命令进行压缩：
```
harp compile -o public --with  minify
```

此时会在 public/js 目录下生成 index.min.js 文件，内容为：

function hello(n){console.log("Hello, ".concat(n,"!")}hello("harp-minify");

压缩 HTML

在 harp 项目中新建 public/index.ejs 文件：

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

在终端中进入项目根目录，执行以下命令进行压缩：
```
harp compile -o public --with  minify
```

此时会在 public 目录下生成 index.html 文件，内容为：

<!DOCTYPE html><html><head><title>harp-minify</title></head><body><h1>Hello world</h1></body></html>

自动生成 CSS 前缀

在 harp 项目中新建 public/css/index.css 文件：
```
body {
  display: flex;
}
```
在终端中进入项目根目录，执行以下命令进行压缩：
```
harp compile -o public --with minify
```

此时会在 public/css 目录下生成 index.min.css 文件，内容为：

body{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}

生成 webp 格式图片

在 harp 项目中新建 public/img/test.jpg 图片文件。
在终端中进入项目根目录，执行以下命令进行生成：
```
harp compile -o public --with  minify
```
此时会在 public/img 目录下生成 test.webp 文件。

总结

使用 harp-minify 可以方便地对静态资源进行压缩和优化，提高网站性能。在实际开发中，可以根据具体需求灵活运用其各种功能，提高代码的质量和效率。

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