html - HTML テンプレートから Rails Asset 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手動で指定された画像パスの代わりに使用されます。

別のサーバーまたは別のパスから画像を提供する 2 番目のケースも同様です。

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

そして、ボブはあなたのおじです！

これらのコマンドの厄介な点の 1 つは、すべてのファイルに対してコマンドを実行する必要があることです。さて、今度は別の UNIX ユーティリティ、find が役に立ちます。このユーティリティは、ディレクトリ ツリー内の一連のファイルに対してスクリプトを実行できます。

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

さて、上記の多くが古代ラテン語のように見える場合 (そして古代ラテン語に堪能でない場合) は、正規表現についてさらに学び、上記のコマンドを微調整してさまざまな異なる操作を実行できるようにすることをお勧めします。あなたが望む変換の種類。これは、予備知識をあまり前提としない sed および正規表現を使用するための非常に優れたガイドです。

正しいことを行う一連のコマンドを作成したら、それらをシェル スクリプト ファイルに保存します。次に、必要なときにそのファイルを実行するだけで、煩わしい作業がすべて実行されます。これが、これらの鈍いコマンドをすべて学習する価値がある理由です。優れた GUI の [検索と置換] ダイアログよりも前もって作業する必要がありますが、機能の柔軟性とスクリプトにまとめる機能により、長期的には時間と煩わしさを節約できます。

Answer 2

レールの外側でアセットパイプラインを使用してみましたか？