如何使用 Git Hooks 自动压缩 CSS 和 JS

当我们将代码推送到生产环境时，理想情况下我们希望压缩客户端的 Javascript 和 CSS 文件。 一些开发人员仍然手动执行此操作，但如果我们使用 Git，自动执行此操作非常容易。

在本教程中，我将使用 Node.JS 组件 – 因此我们需要安装 Node.JS 。 你需要的两个包是 terser 和 cssnano。 这些分别涵盖了javascript和CSS。我们可以执行下面的命令安装这两个组件

npm install terser -g
npm install cssnano -g

我们在这里使用 -g 是因为我们想从命令行运行它们。 接下来，我们需要找到 git hooks 目录。 如果想创建自己的自定义 git 钩子、目录，请参考 如何将你的 Githooks 移动到你的仓库 这篇文章进行操作。

否则，我们可以在存储库中的 .git/hooks 中找到 git hooks 目录。 我们将需要在执行 git 合并的每个位置编辑此文件。 这可能意味着在本地计算机或生产服务器上。

但是，如果按照前面提到的教程进行操作，则无需在多个位置进行编辑。 ?

创建你的钩子

接下来，在 hooks 目录中创建一个名为 post-merge 的文件。 将以下内容放入该文件中：

echo 'Installing Modules..'
npm install
echo 'Compressing CSS..'
cssnano views/style.css views/style.css
cssnano views/async.css views/async.css 
echo 'Compressing JS..'
terser views/local.js --output views/local.js --compress --mangle 

在这里添加了 3 行：2 行用于 cssnano，1 行用于 terser。 如果想要更多，我们可以添加额外的行来引用不同的文件。

cssnano 语法是 cssnano link/to/old/file.css link/to/new/file.css ，因此更新引用 cssnano 的两行来换成自己的文件。 这里只是覆盖服务器上的文件，但这可能不适合你。

对于 terser，语法类似，即 terser link/to/oldJs.js --output link/to/newJs.js --compress --mangle 。 terser 还有更多选项，我们可以在他们的 NPM 页面上查看，但这将满足我们的需求。

我还在文件加载时添加了一些信息，因此我们知道出于调试目的而发生了什么。

运行合并

现在我们已经添加了 post-merge 文件，当运行 git pull 或 git merge 时，这些命令将立即运行。 这意味着我们所有新加载的 CSS 和 JS 文件都将被压缩，从而为用户带来更快的加载时间。

火焰兔

海报 链接