2012-12-12 16 views
9

Tôi thấy mình liên tục làm điều tương tự, sử dụng nhà thiết kế để tạo ra ui's đẹp sau đó chuyển đổi HTML/CSS để phân chia trên đường ống nội dung và tìm và thay thế đường dẫn và thẻ css + js ; cập nhật mọi thứ để sử dụng đường dẫn nội dung. Có cái gì đó tự động thực hiện điều này?HTML mẫu chuyển đổi nhanh sang Rails Tài sản ERB/​​Sass bố trí

+1

Bạn có thể xây dựng không? Tại sao đường dẫn tài sản mới? Để phá bộ nhớ đệm? –

Trả lời

5

Với tôi, tình huống này chỉ cần gọi to lên sed. Nếu bạn đang chạy Linux, Mac OS X hoặc một * nix khác, hãy đọc tiếp. (Nếu môi trường dev của bạn là Windows nhưng bạn đang triển khai tới máy chủ * nix nơi bạn có thể thiết lập kịch bản triển khai sau, phương pháp này vẫn sẽ hoạt động ở đó.)

Vì vậy, nhà thiết kế của bạn có quyền truy cập vào nội dung của bạn trong thư mục cục bộ và nó sẽ tạo các thẻ như <img src="images/logo.png">. Tuy nhiên, khi triển khai, bạn muốn thay thế các đường dẫn đó bằng các cuộc gọi ERB như <img src="<%= asset_path 'logo.png' %>"> hoặc thay đổi chúng để trỏ vào một số CDN bên ngoài có thẻ như <img src="http://assets.mysite.com/logo.png">, phải không?

Vâng, trong cả hai trường hợp, sed là bạn của bạn! Sed có thể (trong số những thứ khác) đi qua một tập tin và áp dụng thay thế regex cho họ tại chỗ. Trong tình hình cuộc gọi ERB (giả sử bạn đã đổi tên tập tin của bạn để có một phần mở rộng ERB), bạn sẽ chạy lệnh này:

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

Sau khi chạy lệnh này, somefile.html.erb sẽ được sử dụng thay vì asset_path đường dẫn hình ảnh được chỉ định theo cách thủ công.

Trường hợp thứ hai, nơi mà bạn đang cung cấp hình ảnh trên máy chủ khác hoặc có thể chỉ từ con đường khác, cũng tương tự như:

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

Và Bob chú của bạn!

Một điều gây phiền toái cho các lệnh này là bạn phải chạy chúng trên mỗi tệp. Vâng, thời gian cho một tiện ích UNIX để đến cứu: tìm. Tiện ích này có thể chạy một kịch bản về một loạt các tập tin trong một cây thư mục:

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

Bây giờ, nếu phần lớn ngoại hình trên như Latin cổ xưa cho bạn (và bạn không thông thạo tiếng Latin cổ), bạn' sẽ muốn tìm hiểu thêm về các biểu thức chính quy, để bạn có thể tinh chỉnh các lệnh trên để thực hiện các loại biến đổi khác nhau mà bạn muốn. This là một hướng dẫn khá tốt để sử dụng các biểu thức chính quy và thông thường mà không có nhiều kiến ​​thức trước.

Khi bạn có một bộ lệnh thực hiện đúng, hãy lưu chúng vào tệp tập lệnh hệ vỏ. Sau đó, chỉ cần chạy tập tin đó bất cứ khi nào bạn cần nó, và nó sẽ làm tất cả các công việc gây phiền nhiễu cho bạn! Đó là những gì làm cho việc học tất cả các lệnh khó hiểu này đáng giá; chúng hoạt động hiệu quả hơn so với giao diện đẹp mắt, thay thế cho hộp thoại thay thế, nhưng tính linh hoạt của những gì chúng làm và khả năng kết hợp chúng thành các tập lệnh giúp bạn tiết kiệm thời gian và khó chịu trong thời gian dài.

Các vấn đề liên quan