Gulp 压缩
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何使用 gulp-minify 插件压缩 JS 代码。
Gulp
Gulp 是一个 Node 任务运行器。它是前端 Web 开发中的一个流式构建系统。它有助于自动化诸如复制文件、压缩 JavaScript 代码或将 TypeScript 编译为 JavaScript 等任务。
gulp-minify 插件可以压缩 JS 文件。生成的文件会更小。压缩后的文件具有 -min.js 扩展名。
安装 Gulp 和 gulp-minify
我们初始化一个 Node.js 项目并安装 Gulp 和 gulp-minify 插件。
$ npm init -y $ npm i --global gulp-cli $ npm i gulp --save-dev
我们初始化一个 Node 项目并安装 Gulp 和 Gulp CLI。
$ npm i --save-dev gulp-minify
我们安装 gulp-minify 插件。
Gulp-minify 示例
下面的示例演示了 gulp-minify 的用法。我们有一个 HTML 表格，显示国家及其人口。有一个排序按钮，用于对包含人口值的第二列进行排序。用于对表格进行排序的 JS 代码使用 gulp-minify 进行压缩。
$ mkdir public/js -p $ mkdir src/js -p $ touch public/index.html gulpfile.js src/js/main.js
我们创建两个目录和三个空文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countries</title>
</head>
<body>
<table id="tbl">
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tr>
<td>Slovakia</td>
<td>5429000</td>
</tr>
<tr>
<td>Norway</td>
<td>5271000</td>
</tr>
<tr>
<td>Croatia</td>
<td>4225000</td>
</tr>
<tr>
<td>Russia</td>
<td>143439000</td>
</tr>
<tr>
<td>Mexico</td>
<td>122273000</td>
</tr>
<tr>
<td>Vietnam</td>
<td>95261000</td>
</tr>
<tr>
<td>Sweden</td>
<td>9967000</td>
</tr>
<tr>
<td>Iceland</td>
<td>337600</td>
</tr>
<tr>
<td>Israel</td>
<td>8622000</td>
</tr>
<tr>
<td>Hungary</td>
<td>9830000</td>
</tr>
<tr>
<td>Germany</td>
<td>82175700</td>
</tr>
<tr>
<td>Japan</td>
<td>126650000</td>
</tr>
</table>
<button id="mybtn">Sort</button>
<script src="js/main-min.js"></script>
</body>
</html>
这是 index.html 文件。它加载 main-min.js 文件，这是 JS main.js 文件的压缩版本。
let btn = document.getElementById('mybtn');
btn.addEventListener('click', sortTable);
function sortTable() {
const tbl = document.getElementById("tbl").tBodies[0];
let store = [];
for (let i = 0, len = tbl.rows.length; i < len; i++) {
let row = tbl.rows[i];
let value = parseInt(row.cells[1].textContent || row.cells[1].innerText);
if (!isNaN(value)) {
store.push([value, row]);
}
}
store.sort((x, y) => {
return x[0] - y[0];
});
for (let i = 0, len = store.length; i < len; i++) {
tbl.appendChild(store[i][1]);
}
store = null;
}
该代码对表格的第二列进行排序。
const { src, dest } = require("gulp");
const minify = require("gulp-minify");
function minifyjs() {
return src('src/js/main.js', { allowEmpty: true })
.pipe(minify({noSource: true}))
.pipe(dest('public/js'))
}
exports.default = minifyjs;
这是包含我们的 Gulp 任务的 gulpfile.js。
function minifyjs() {
return src('src/js/main.js', { allowEmpty: true })
.pipe(minify({noSource: true}))
.pipe(dest('public/js'))
}
src() 创建一个用于读取 main.js 文件的流。使用 pipe()，我们将流式数据传递给 minify() 函数。最后，我们将编译后的数据传递给 dest()，它又创建了一个将数据写入文件系统的流。最终文件被复制到 public/js 目录。
exports.default = minifyjs;
默认任务是在没有通过 Gulp CLI 指定任务名称时执行的任务。它运行 minifyjs 任务。
$ gulp [20:23:47] Using gulpfile ~/Documents/prog/js/gulp-lib/gulpfile.js [20:23:48] Starting 'default'... [20:23:48] Finished 'default' after 71 ms
我们运行默认任务。main-min.js 文件已生成。
在本文中，我们使用了 gulp-minify 来压缩 JS 代码。
您可能还对以下相关教程感兴趣：Node Sass 教程、Gulp 入门教程 和 Gulp Sass 教程。
列出 所有 JavaScript 教程。