迹忆客 专注技术分享

当前位置:主页 > 学无止境 >

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

作者:迹忆客 最近更新:2022/05/10 浏览次数:

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

在本教程中,我将使用 Node.JS 组件 - 因此我们需要安装 Node.JS 。 你需要的两个包是 tersercssnano。 这些分别涵盖了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 pullgit merge 时,这些命令将立即运行。 这意味着我们所有新加载的 CSS 和 JS 文件都将被压缩,从而为用户带来更快的加载时间。

上一篇:如何将 Githooks 移动到仓库

下一篇:没有了

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

git
扫码一下
查看教程更方便