Rails 前端使用 middleman 配合后端 rails 开发

femto · 2015年07月08日 · 最后由 femto 回复于 2015年07月08日 · 1852 次阅读

在我的公司,最近让前端的小朋友熟悉了一下 middleman,然后用来配合后端 rails 开发, 感觉一个字爽,真的很方便很有效率。

说说我对 middleman 的修改配置: 默认 middleman 生成的目录结构跟 rails 的有点区别,改: assets 全部搬到 source/assets 目录下, 改一下 config.rb 即可:

set :css_dir, 'assets/stylesheets'

set :js_dir, 'assets/javascripts'

set :images_dir, 'assets/images'

然后把 layouts 和其他 page 搬到 source/views/下面 (这个目录自己建拉): 然后每次修改,由于 middleman 也是支持 scss,coffeescript,前端加的 scss,coffeescript 直接 assets 目录整个拷贝到 rails 里头就好,layouts 也可以直接拷贝,因为代码都一样, 唯一就每一个 page,动态部分 middleman 和 rails 差别很大,这个就没办法了。

关于 page 在 source/views 目录下: 多了一层 views,如果嫌调试的时候多打路径/views,可以 config.rb 里头加 proxy:

Dir["source/views/**/*"].each do |file|
  if File.file?(file) && file !~ /^source\/views\/layouts/
    #puts file
    file = file.sub(/\.erb$/,"") #chop off last component
    #puts file.sub(/^source/,"")
    #puts file.sub(/^source\/views/,"")
    proxy file.sub(/^source\/views/,""), file.sub(/^source/,"")
  end
end

把所有文件都 proxy 少 views 路径一份, 这个 proxy 也可以不带扩展名,

# proxy "/index.html", "/views/home/index.html"
# proxy "/index2", "/views/home/index.html"
# proxy "/", "/views/home/index.html"

这样可以模拟 rails 一些路由,因为 middleman 是不支持路由的。

大功告成,什么,你说 layout 里头还有 flash 的显示两边不一样? 这好办,用 helper method: layout:

<body>
  <%= flash_message %>
...
</body>

middleman 里头建立 helpers/flash_helper.rb

module FlashHelper
  def flash_message
    #空实现就好
  end
end

rails 里头 application_helper.rb:

def flash_message
    result = ""
    flash.each do |key, value|
      result << content_tag(:div,:class=>"alert alert-#{key}") do
         content_tag(:a,:"data-dismiss"=>"close",:class=>"close",:href=>"#") do
           "x"
         end +
        content_tag(:ul) do
          content_tag(:li) do
            value
          end
        end
      end


    end
    result.html_safe
  end

### 发现前端这里代码都看的懂,直接帮我改了:) 大功告成:) 真的很方便

好麻烦,直接跑 Rails 更好

全整合到一个项目,太复杂了

你说让前端直接改 rails 项目?帮前端 setup mysql, redis-server,全文检索什么的, 这些前端不太关心啊? 直接改 rails 项目这个不太好把,前端还是要有前端的项目啊。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册