使用 Netlify 大型媒体

我前几天刚完成了这个操作，所以我想记录下来分享给大家。有一个叫做 Git 大文件存储 (Git LFS) 的东西。它的核心思想是：将大型文件直接从你的仓库中排除。假设你的网站上有 500MB 的图像，并且这些图像需要放在仓库中以便你在本地进行操作。但这样做很糟糕，因为克隆仓库的人需要下载大量数据。Git LFS 就是解决这个问题的方案。

Netlify 在 Git LFS 的基础上提供了一个产品，叫做 大型媒体。它的核心思想是：除了简化设置过程并提供存储这些大型文件的位置之外，一旦你将文件放入其中，你就可以对其进行 URL 查询参数调整大小，这非常有用。我非常喜欢让电脑帮我处理图像大小调整。

如果你刚开始使用这个功能，最好先阅读一下 官方文档。但我遇到了一些小问题，所以我在这里记录下来，以防对其他人有所帮助。

你需要安装一些东西

我使用的是 Mac，所以这些是我执行的操作。你需要

1. Git LFS 本身：brew install git-lfs
2. Netlify CLI：npm install netlify-cli -g
3. Netlify 大型媒体 CLI 插件：netlify plugins:install netlify-lm-plugin 然后 netlify lm:install

“关联”站点

你必须在 Netlify 上进行身份验证，这会将 Netlify CLI 连接到你正在处理的站点。

netlify link

它会在你的项目中创建一个名为 .netlify/state.json 的文件，内容如下所示

{
	"siteId": "xxx"
}

运行设置

netlify lm:setup

这会在你的项目中创建另一个名为 .lsfconfig 的文件。

[lfs]
	url = https://xxx.netlify.com/.netlify/large-media

你应该将这两个文件都提交。

“跟踪”所有图像

你需要运行更多终端命令来告诉 Netlify 大型媒体哪些图像应该放在 Git LFS 中。假设你有一堆 PNG 和 JPG，你可以运行

git lfs track "*.jpg" "*.png"

这是一个我遇到的一个小问题。我的项目主要包含 .jpeg 文件，我搞不清楚为什么没有被选中。请注意略微不同的文件扩展名（ughadgk）。

这将在你的项目中生成另一个名为 .gitattributes 的文件。在我的例子中

*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text

这次，当你推送时，所有图像都会上传到 Netlify 大型媒体存储服务。根据上传的数据量，推送过程可能会显得格外缓慢。

我主要的问题出现在这一点上。最后一次推送一直在我和我的 Git 客户端中循环，最终失败。事实证明，我需要安装 netlify-credential-helper。安装之后，它就可以正常工作了。

顺便说一句，不仅图像可以这样处理，任何大型文件都可以。我相信它们被称为“二进制”文件，而 Git 在处理这类文件方面并不是特别擅长。

检出你的仓库，图像现在只是指针

最好的部分

为了根据需要动态调整图像大小，我可以通过 URL 参数来实现。

<img 
  src="slides/Oops.003.jpeg?nf_resize=fit&w=1000"
  alt="Screenshots of CSS-Tricks and CodePen homepages"
/>

它由 响应式图像 语法提供支持。例如……

<img srcset="img.jpg?nf_resize=fit&w=320 320w,
             img.jpg?nf_resize=fit&w=480 480w,
             img.jpg?nf_resize=fit&w=800 800w"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
        src="img.jpg?nf_resize=fit&w=800" alt="Elva dressed as a fairy">