2

我正在开发第三方脚本。我将自己的样式表添加到嵌入脚本的页面中。当前样式是 JavaScript 中的长字符串。这很愚蠢，但它比附加样式链接并发出另一个 http 请求要快。

查看 facebook SDK，我们看到一个 php 脚本，它执行类似这样的操作，其中JS_FILES包含CSS_FILES文件名数组：

// all.js
foreach ($JS_FILES as $file) {
  echo file_get_contents($file);
}

$css = '';
foreach ($CSS_FILES as $file) {
  $css .= file_get_contents($file);
}
// css URLs are relative to facebook domains
$css = preg_replace('#url\(/#', 'url(http://static.ak.fbcdn.net/', $css);
echo 'FB.Dom.addCssRules(' . json_encode($css) . ', ["pkg"])';

因此 css 被转换为 JSON 并发送到FB.Dom.addCssRules将样式附加到页面的函数。

在 JS 字符串中编写 css 是愚蠢的。我想在我的风格中使用 SCSS，我想有语法高亮，我想在一个合理的环境中开发。

我需要做什么，如何连接到 Asset Pipeline / Sprockets / Tilt 以使这件事发生？

代码示例是一个很大的优势，因为我不是一个疯狂的优秀 ruby​​ 开发人员。

编辑：我浏览了 Asset Pipeline 文档，并没有看到任何实际挂钩的方法。我看到的唯一选择是创建一个调用默认转换的 Tranfsorm 类，然后将输出转换为 JS 字符串并将其发送到函数。我真的不知道该怎么做。我不知道我是否甚至可以在.jscss不使管道崩溃的情况下要求文件。另一种选择（非常相似）是编写一个像Black Coffee这样的 gem ，我真的不知道我应该如何去实现它。

4

3 回答 3

4

您可能不需要新的模板引擎来完成此操作；您可以在您的 javascript 文件中使用一些辅助方法。您可以使用#evaluate 内联呈现给定的 CSS 文件，其结果需要被 javascript 转义。根据sprockets 文档，您可以通过直接在 js 模板中挂钩到 Sprockets 环境上下文类来包含帮助程序。因此，假设您有一个编译为“inline.css”的 css 文件，您可以包含 ActionView::Helpers::JavaScriptHelper 并执行以下操作：

# css_string.js.erb
<% environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper } %>
css_string = "<%= escape_javascript(evaluate('inline.css')) %>";
于 2012-09-26T02:34:09.060 回答
3

Sprockets 并不适合解决这个问题。你最终会写出丑陋且随机失败的代码（我是从令人沮丧的个人经历中说的Rails.application.assets.find_asset()。）

相反，请查看RequireJS + 文本插件，用于编写具有非 JS 依赖项的 Javascript（如 CSS 和 Mustache/Handlebars 模板），并将其全部构建到优化的单个文件中以用于生产。

RequireJS 使用requires-rails gem/engine 轻松与 Rails 集成以进行开发和生产。

请注意，虽然您可以在同一个应用程序中使用 Sprockets 和 RequireJS，但您不应该在同一个文件/依赖链中混合依赖机制//= require ...和。define([...], function(...){})

于 2012-09-29T20:51:20.347 回答
2

我认为@rossta 让你在这里走上了正确的道路。不过，我建议进行一些修改。首先，如果您正在用 sass 编写样式表，并且希望将编译后的 css 插入到您的 javascript 中，那么以下是实现此目的的一种方法：

<%= escape_javascript(Rails.application.assets.find_asset('inline').to_s.chomp) %>

whereinline.css.scss是资产搜索路径上的某处。该方法find_asset将编译您的 sass 并将输出作为字符串返回。一个问题是，除非 javascript 文件本身发生更改，或者您明确标记inline.css为依赖项，否则您包含此内容的 javascript 不会被重新编译。您可以通过包含指令来做到这一点

//= depend_on inline.css
于 2012-09-27T03:11:15.580 回答