netlify_使Netlify大型媒体发展

netlify

前几天我只是这样做，所以我想把它写成博客。 有一个叫做Git大文件存储 （Git LFS ）的东西。 这就是整个要点：它可以直接将大型文件保留在您的存储库之外。 假设您的网站上有500MB的图像，并且它们一定要包含在存储库中，以便您可以在本地使用它。 但这很糟糕，因为克隆存储库的人需要下载大量数据。 Git LFS是答案。

Netlify 在 Git LFS之上有一个称为Large Media的产品 。 这就是它的全部要点：除了使所有设置都变得更容易并提供放置这些大文件的位置之外，一旦您将文件放在其中，就可以根据它们的大小对URL查询param ，这非常有用。 我就是要让计算机为我做图像大小调整。

如果您开始使用此工具，则可能应该只阅读文档 。 但是我遇到了一些障碍，所以在这里将它们记在下面，以防最终有用。

你必须安装东西

我在Mac上，所以这些是我所做的。 你需要：

1. Git LFS本身： brew install git-lfs
2. Netlify CLI： npm install netlify-cli -g
3. 用于CLI的Netlify Large Media附加组件： 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 Large Media哪些图像应在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 Large Media存储服务。 视您上传的数量而定，这似乎是一种超慢的推动力。

我的主要问题就在这一点上。 这最后的推动只会为我和我的Git客户旋转，最终失败。 原来我需要安装netlify-credential-helper 。 我这样做之后效果很好。

记录下来，不仅仅是可以通过这种方式处理的图像，还包括任何大文件。 我相信它们被称为“二进制”文件，并且Git并不是特别擅长处理这些文件。

查看您的仓库，图像现在只是指针

Git回购，其中JPG文件实际上不是图像，而是一个小的文本指针。

而最好的部分

要将图像即时调整为所需大小，可以通过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">

翻译自: https://css-tricks.com/getting-netlify-large-media-going/

netlify