快速将HTML模板转换为Rails Asset ERB/Sass布局

Question

我发现自己一直在做同样的事情，使用设计器创建漂亮的ui，然后转换HTML/CSS以在资源管道中拆分，并查找和替换路径和css+js标记；更新所有内容以使用资源路径。有没有什么东西可以自动做到这一点？

Answer 1

对我来说，这种情况对sed来说是响亮的呼唤。如果您运行的是Linux、Mac或其他*nix，请继续阅读。(如果您的开发环境是Windows，但您正在部署到可以设置部署后脚本的*nix服务器，则此方法在那里仍然有效。)

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

不管是哪种情况，sed都是您的朋友！Sed可以(尤其是)遍历一个文件，并就地对它们应用正则表达式替换。在ERB调用的情况下(假设您已经将文件重命名为具有erb扩展名)，您将运行以下命令：

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

运行此命令后，somefile.html.erb将使用asset_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' {} \;

现在，如果上面的很多内容在您看来像是古拉丁语(而您不是很流利地使用古拉丁语)，那么您将想要学习更多关于正则表达式的知识，这样您就可以调整上面的命令来执行各种不同类型的转换。This是使用sed和正则表达式的一个很好的指南，这些表达式不需要太多的先验知识。

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

Answer 2

你试过使用asset pipeline outside rails吗？