如何在 CI/CD 流程中集成图片上传功能？

Question

目前，在我们公司的图片资源都托管在一个公共目录 /resources/image 里。假如我们要在一个页面上引入一个图片，就会如下所示写路径：

<img src="/resources/image/a.png">

这样会有一个问题，我们图片资源每次也需要放到最后的打包产物里，到现在，resources 目录已经高达 70 M了，严重增大了包体积。于是，现在想把所有的图片都放到 CDN 中。

想到的方法是：本地开发依然引用 resources 里的，但是发布到线上时，使用打包工具更换 publicPath，publicPath 的值即为CDN 的前缀，这一样以来，线上的资源就可以不再引用 /resources/image 里的，打包体积就会小非常多。

// before
<img src="/resources/image/a.png">

// after
<img src="https://some.cdn.com/resources/image/a.png">

但是这样有一个问题，我们每次增加文件都要手动上传到 CDN，会比较麻烦。

我们公司目前在使用 Gitlab，也有可以上传图片的接口。有办法做到在本地增加了文件，当提交代码到远端的时候，在 CI/CD 流程自动把有变更的图片上传到 CDN 吗？

Answer 1

一般来说这个活儿是写在构建脚本里的……

以 Webpack 为例，有 afterEmit 这个钩子，可以在构建后执行一些操作，这里你就可以遍历输出结果目录，把符合条件的文件通过 HTTP 接口的方式上传到你的云存储里。

（小提示：为什么不是构建前上传？因为往往输出结果会带 hashname，我们要上传的应该是构建后的这个文件、而不是原始的文件）。

具体案例随便找找就好了，我也不知道你们用啥云存储：https://cn.bing.com/search?q=...