快速转换HTML模板到Rails资产ERB/Sass布局

Question

我发现自己经常做同样的事情,使用设计师创建漂亮的ui然后转换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.erb将使用asset_path而不是手动指定的图像路径.

第二种情况是,您在另一台服务器上提供图像,或者只是从另一条路径提供图像,类似于:

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

而鲍勃是你的叔叔!

对这些命令感到烦恼的一件事是你必须在每个文件上运行它们.那么,是时候让另一个UNIX实用程序来救援:找到.该实用程序可以在目录树中的一堆文件上运行脚本:

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

现在,如果上面的大部分看起来像古代拉丁语(并且你不熟悉古代拉丁语),你会想要更多地了解正则表达式,这样你就可以调整上面的命令来做各种不同的你想要的各种转变.这是一个很好的指南,使用sed和正则表达式,并没有先前的知识.

一旦有了一组正确的命令,就将它们保存到shell脚本文件中.然后,只要你需要它就运行该文件,它将为你做所有烦人的工作!这就是学习所有这些钝命令的价值所在; 他们比一个漂亮的GUI查找和替换对话框更加提前工作,但是他们所做的灵活性以及将它们捆绑到脚本中的能力从长远来看可以节省您的时间和烦恼.