菜园前端

Appearance

自动化压缩文件 ​

自动化压缩文件，其实就是指定某个目录，通过 node 方式将其进行打包成 .zip。

设计初衷 ​

在平时的项目部署环节中，通常都是使用 gulp 实现自动化部署项目，将打包的文件夹里所有文件直接发送到服务器上，无需进行打压缩包。不过有些项目并非自动化部署，还是依然保持手动打成压缩包，然后将压缩包的名称改成项目名称 + 打包日期，最后在发送给其他同事部署，这个时候自动化压缩文件功能就起到效果了。

实现目标 ​

执行命令 npm run zip 后，将 dist 目录下所有文件打成压缩包。

压缩包命名格式：dist-202405100905.zip

实现代码 ​

使用前请使用 NPM 或者 YARN 安装插件。

sh
yarn add dayjs archiver
yarn add dayjs archiver
js
const dayjs = require('dayjs')
const fs = require('fs')
const archiver = require('archiver')

/**
 * 创建一个输出流，指向要生成的Zip文件
 * 设置压缩级别为 9
 */
const output = fs.createWriteStream(`dist-${dayjs().format('YYYYMMDDHHMM')}.zip`)
const archive = archiver('zip', {
    zlib: { level: 9 }
})

/**
 * 监听压缩完成时，输出压缩成功信息
 */
output.on('close', () => {
    console.log(archive.pointer() + ' total bytes')
    console.log('压缩完成')
})

/**
 * 监听压缩出现错误时，输出错误信息
 */
archive.on('error', (err) => {
    throw err
})

/**
 * 将压缩流和输出流管道连接起来
 */
archive.pipe(output)

/**
 * 设置要压缩的目录为 ./dist
 * 第二个参数为 false，表示打包后不包含 dist 根目录
 */
archive.directory('./dist', false)

/**
 * 开始压缩
 */
archive.finalize()
const dayjs = require('dayjs')
const fs = require('fs')
const archiver = require('archiver')

/**
 * 创建一个输出流，指向要生成的Zip文件
 * 设置压缩级别为 9
 */
const output = fs.createWriteStream(`dist-${dayjs().format('YYYYMMDDHHMM')}.zip`)
const archive = archiver('zip', {
    zlib: { level: 9 }
})

/**
 * 监听压缩完成时，输出压缩成功信息
 */
output.on('close', () => {
    console.log(archive.pointer() + ' total bytes')
    console.log('压缩完成')
})

/**
 * 监听压缩出现错误时，输出错误信息
 */
archive.on('error', (err) => {
    throw err
})

/**
 * 将压缩流和输出流管道连接起来
 */
archive.pipe(output)

/**
 * 设置要压缩的目录为 ./dist
 * 第二个参数为 false，表示打包后不包含 dist 根目录
 */
archive.directory('./dist', false)

/**
 * 开始压缩
 */
archive.finalize()
json
{
    "dependencies": {
        "archiver": "^7.0.1",
        "dayjs": "^1.11.11"
    },
    "scripts": {
        "zip": "node index.js"
    }
}
{
    "dependencies": {
        "archiver": "^7.0.1",
        "dayjs": "^1.11.11"
    },
    "scripts": {
        "zip": "node index.js"
    }
}

结合 build 之后执行压缩 ​

通常项目都是会先进行 npm run build 进行打包，打包之后在执行 npm run zip 打压缩包。这样就会有两次的操作，并且还要等待打包完成。所以可以通过下方代码进行优化，只需要执行一次即可。

json
{
    "scripts": {
        "build": "vite build --base=./ ",
        "zip": "node index.js",
        "postbuild": "npm run zip"
    }
}
{
    "scripts": {
        "build": "vite build --base=./ ",
        "zip": "node index.js",
        "postbuild": "npm run zip"
    }
}

postbuild 钩子，会在 npm run build 执行完之后执行。