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

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

1. 下载组件#

在本教程中，我将使用 Node.JS 组件 – 因此您需要安装 Node.JS。您将需要的两个包是terser和cssnano。这些分别涵盖了javascript和CSS。要安装这两个，您可以如下所示进行：

npm install terser -g
npm install cssnano -g

我们-g在这里使用是因为我们想从命令行运行这些。接下来，您需要找到您的 git hooks 目录。如果您想创建自己的自定义 git hooks、目录，请按照本教程进行操作。

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

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

2. 创建你的钩子#

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

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 页面上查看，但这将满足我们的需求。

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

3. 运行你的合并#

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