1. 首页
  2. css

CSS本地开发,使用生产中的图像

在本地处理你的网站意味着在你的计算机上有使你的网站滴答作响的文件。这些文件通常存在于版本控制存储库中。你在他们身上工作,当你准备好的时候把他们推到回购。其他人也工作,你把他们的变化拉下来。
可能不在该repo中的是来自CMS的图像文件。WordPress就是一个典型的例子。当你在WordPress中上传一个图片时,它会做一整首歌和一整首舞。它被上传到\”uploads\”文件夹,创建多个版本,甚至更新数据库和附件元数据。没有发生的是所有这些文件都会发生版本控制提交。
有一些方法可以确保您拥有这些文件。你可以写个剧本把他们拉下来。你可以偶尔手动FTP一次。在wordpressland中,有一些插件可以提供帮助,比如wpdb Migrate Pro,它不仅可以移动数据库,还可以移动图像。
但您可能甚至不想处理图像。也许:
– 您不想在回购中使用这些图像。也许repo只是一个主题文件夹,这样做是有意义的。
– 你有10 GB的图像,移动它们是不切实际和没有必要的。
我认为这是完全合法的。一个出版风格的网站可能不需要把他们上传的每一张图片都作为他们主报告的一部分。你明白了。
肖恩·兰格(Sean Lange)在他2013年的文章《在本地开发时使用远程图像文件》(Using Remote Image Files When You development local)中谈到了这一点。他的解决方案是在web服务器级别重写本地URL,以指向生产文件:
我在apacheurl重写规则中找到了答案。当Apache程序处理传入的网页请求时,重写规则允许它更改与某些模式匹配的URL—例如,它们可以将对本地计算机上\”files\”目录的请求转换为对生产服务器上远程URL的请求。
以下是他的Apache重写规则:
RewriteEngine on# Force image styles that have local files that exist to be generated.RewriteCond %{REQUEST_URI} ^/sites/([^/]*)/files/styles/[^/]*/public/((.*))$RewriteCond %{DOCUMENT_ROOT}/sites/%1/files/%2 -fRewriteRule ^(.*)$ $1 [QSA,L]# Otherwise, send anything else that\”s in the files directory to the production server.RewriteCond %{REQUEST_URI} ^/sites/[^/]*/files/.*$RewriteCond %{REQUEST_URI} !^/sites/[^/]*/files/css/.*$RewriteCond %{REQUEST_URI} !^/sites/[^/]*/files/js/.*$RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ http://www.example.com/$1 [QSA,L]
他通过MAMP使用Drupal,但只要您在本地使用Apache,这都只是同一想法的变体。匹配指向您要定位的资产的URL,将它们重写到实时站点。
他能够将这些规则粘贴到MAMP中处理这些规则的小框中。我在本地运行WordPress,通过一个小Docker设置,所以我直接编辑了我的`.htaccess`文件,并根据我的需要简化了它:
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^/]*/.*$RewriteRule ^(.*)$ https://css-tricks.com/$1 [QSA,L]
对我来说非常好!下面是一个直观的解释:

CSS本地开发,使用生产中的图像 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9c%ac%e5%9c%b0%e5%bc%80%e5%8f%91%ef%bc%8c%e4%bd%bf%e7%94%a8%e7%94%9f%e4%ba%a7%e4%b8%ad%e7%9a%84%e5%9b%be%e5%83%8f/