Rails开启Asset Pipeline后,某些样式和脚本不能加载的问题

Posted by baicai on May 19, 2016

Asset Pipeline 提供了一个框架,用于连接、压缩 JavaScript 和 CSS 文件。还允许使用其他语言和预处理器编写 JavaScript 和 CSS,例如 CoffeeScript、Sass 和 ERB。</font></p>

Rails种是默认开启Asset Pipeline的。</font></p>

<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>

但是有时候,production环境下,样式什么的会失效。经过分析,我的失效原因是如下原因。</font></p>

application.js中,是默认引入turbolinks这个类库的。</font></p>

Turbolinks 为页面中所有的 <a> 元素添加了一个点击事件处理程序。如果浏览器支持 PushState,Turbolinks 会发起 Ajax 请求,处理响应,然后使用响应主体替换原始页面的整个 <body> 元素。最后,使用 PushState 技术更改页面的 URL,让新页面可刷新,并且有个精美的 URL。</font></p>

如果我们需要在页面加载时做一些事情。在 jQuery 中,我们可以这么写:

$(document).ready(xxxxx)

不过,因为 Turbolinks 改变了常规的页面加载流程,所以不会触发这个事件。如果编写了类似上面的代码,要将其修改为(以我的代码为例):</font></p>

$(document).on('page:change', function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

其他可用事件等详细信息,请参阅 Turbolinks 的说明文件。</font></p>