html - 将 HTML 模板快速转换为 Rails 资产 ERB/Sass 布局

Question

我发现自己经常做同样的事情，使用设计师创建漂亮的用户界面，然后将 HTML/CSS 转换为跨资产管道拆分并查找和替换路径和 css+js 标签；更新所有内容以使用资产路径。有什么东西可以自动做到这一点吗？

Answer 1

对我来说，这种情况只是大声呼唤sed。如果您正在运行 Linux、Mac OS X 或其他 *nix，请继续阅读。（如果您的开发环境是 Windows，但您正在部署到 *nix 服务器，您可以在其中设置部署后脚本，那么这种方法仍然可以在那里工作。）

因此，您的设计师可以访问您在本地目录中的资产，并且会生成类似<img src="images/logo.png">. 但是，在部署中，您希望将这些路径替换为 ERB 调用<img src="<%= asset_path 'logo.png' %>">，或者将它们更改为指向带有类似标签的某个外部 CDN <img src="http://assets.mysite.com/logo.png">，对吗？

好吧，无论哪种情况，sed 都是您的朋友！Sed 可以（除其他外）遍历文件并就地对其应用正则表达式替换。在 ERB 调用情况下（假设您已经将文件重命名为具有 erb 扩展名），您将运行以下命令：

$ sed -i 's/\(<img[^>]*src="\)images/\([^"]+\)\("[^>*]>\)/\1<%= asset_path \'\2\' %>\3/g' somefile.html.erb

运行此命令后，将使用 somefile.html.erbasset_path而不是手动指定的图像路径。

第二种情况，您在另一台服务器上或可能只是从另一条路径提供图像，是类似的：

$ sed -i 's/\(<img[^>]*src="\)images/\([^"]+\)\("[^>*]>\)/\1http:\/\/assets.mysite.com\/\2\3/g' somefile.html

鲍勃是你的叔叔！

这些命令令人讨厌的一件事是您必须在每个文件上运行它们。好吧，是时候让另一个 UNIX 实用程序来救援了：find。此实用程序可以在目录树中的一堆文件上运行脚本：

$ find dir/with/html -type f -name '*.html.erb' -exec sed 's/foo/bar/g' {} \;

现在，如果上面的大部分内容对您来说看起来像是古拉丁语（并且您不流利地使用古拉丁语），您将想要了解更多关于正则表达式的知识，以便您可以调整上述命令以执行各种不同的操作您想要的各种转换。这是一个很好的使用 sed 和正则表达式的指南，不需要太多的先验知识。

一旦你有一组正确的命令，将它们保存到一个 shell 脚本文件中。然后，只需在需要时运行该文件，它就会为您完成所有烦人的工作！这就是让学习所有这些钝命令值得学习的原因。它们比漂亮的 GUI 查找和替换对话框更多的是前期工作，但是它们的灵活性以及将它们捆绑到脚本中的能力从长远来看可以节省您的时间和烦恼。

Answer 2

您是否尝试过在 rails 外使用资产管道？