WebP转换自动化：使用Git钩子和CI/CD实现全自动优化

如果你是一个开发团队，每次手动转换WebP很繁琐。通过自动化工具，可以在代码提交或部署时自动将图片转为WebP。本文介绍几种WebP自动化的方法，从简单的Git钩子到完整的CI/CD流水线。

一、使用Git pre-commit钩子自动转换

在项目根目录的.git/hooks/下创建pre-commit脚本，内容如下：
#!/bin/bash
# 查找所有新增或修改的JPG/PNG文件
for img in $(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(jpg|jpeg|png)$'); do
  # 转换为WebP
  cwebp -q 80 "$img" -o "${img%.*}.webp"
  # 将WebP文件添加到暂存区
  git add "${img%.*}.webp"
done
每次commit前，脚本会自动转换图片并添加WebP版本。需要安装cwebp工具。

二、使用GitHub Actions自动转换

在.github/workflows/下创建convert-webp.yml，配置：
name: Convert to WebP
on: [push]
jobs:
  convert:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install cwebp
        run: sudo apt-get install webp
      - name: Convert images
        run: |
          for img in $(find . -name '*.jpg' -o -name '*.png'); do
            cwebp -q 80 "$img" -o "${img%.*}.webp"
          done
      - name: Commit and push
        uses: stefanzweifel/git-auto-commit-action@v4
每次push后，GitHub Actions自动转换图片并提交WebP文件。

三、在CI/CD部署流水线中集成

在Jenkins、GitLab CI或Travis CI的部署脚本中，添加转换命令。例如在构建后执行：
find ./dist/images -type f $ -name "*.jpg" -o -name "*.png" $ -exec cwebp -q 80 {} -o {}.webp \;
然后修改HTML中的图片路径引用，或通过服务端逻辑判断。

四、使用Node.js脚本自动化

如果你使用webpack或gulp，可以集成插件。例如gulp-webp：
const gulp = require('gulp');
const webp = require('gulp-webp');
gulp.task('webp', () =>
  gulp.src('src/images/**/*.{jpg,png}')
    .pipe(webp({ quality: 80 }))
    .pipe(gulp.dest('dist/images'))
);
运行gulp webp即可批量转换。