如何为 Jekyll 添加自动前缀答案

【问题标题】：How to include autoprefixer for Jekyll如何为 Jekyll 添加自动前缀
【发布时间】：2015-05-25 02:15:58
【问题描述】：

Jekyll 新手和 Ruby 新手我尝试将我的 (s)css 文件的 autoprefixer-rails 直接包含到 Jekyll 中。所以一旦页面由 Jekyll 生成，自动前缀将运行在我生成的 css 文件上。不幸的是，我没有设法正确设置，自动前缀似乎甚至没有触及我的文件。

关注我的 Gemfile：

source "https://rubygems.org"

gem 'jekyll'
gem 'jekyll-assets'
gem 'autoprefixer-rails'

以及我的 Jekyll 配置文件的一部分：

...
gems: ['jekyll-assets', 'autoprefixer-rails']
...

缺少哪些设置才能使其正常工作？任何帮助表示赞赏！

【问题讨论】：

我最近开始用 grunt 来做这一切，所以我会让 Autoprefixer 在站点重新编译之前运行，所以它只在 CSS 更改时运行，而不是在任何内容更改时运行。所以我强烈推荐使用 grunt 的 jekyll 工作流程。
谢谢，我读过关于 grunt 的文章，但我希望有内置的解决方案，我想我现在会看看 :)
我觉得它是对整个 jekyll 工作流程的一个很好的补充。如果你使用 Sass 和大量的 javascript，它对整个过程真的很有帮助。连接，缩小，自动前缀，livereload。我真的只看到单独使用 jekyll 的优势。

标签： css ruby jekyll jekyll-extensions autoprefixer

【解决方案1】：

这是完全可能的，也很容易！

您可以在网上找到的大多数资源都建议切换到Jekyll Assets，它带有许多默认插件，包括autoprefixer-rails。然而，这取代了整个 Jekyll 资产管道，并且需要在很多地方进行更改。前期投入相当高，只是为了让它发挥作用。另外，该项目似乎是dormant。

继续寻找简单问题的简单解决方案，我遇到了jekyll-autoprefixer，可以使用Ruby Gem。将其集成到我的 Jekyll 工作流程中非常简单：

更新 Gemfile 以包含以下内容：
```
gem "jekyll-autoprefixer", "~> 1.0.2"
```
将以下内容添加到 _config.yml：
```
plugins:
  - jekyll-autoprefixer
```
可选地将所需的浏览器支持添加到 _config.yml（例如，对于最新的 2 个版本和 Edge 版本 14 及更高版本）：
```
autoprefixer:
  browsers: 
    - last 2 versions
    - Edge >= 14
```
注意：您也可以在根目录中提供 .browserslistrc 文件。
可选择启用 CSS 网格布局前缀。这似乎是不安全的，默认情况下是禁用的。您可以使用 control comment（例如 /* autoprefixer grid: autoplace */）从 CSS 代码启用它，也可以通过 _config.yml 全局启用它：
```
autoprefixer:
  grid: autoplace
```

这就是将 autoprefixer 集成到 Jekyll 所需的全部内容。

【讨论】：

【解决方案2】：

使用 jekyll-assets 和 autoprefixer-rails 将 Autoprefixer 添加到 Jekyll 的文档已更新： https://github.com/jekyll/jekyll-assets#addons

【讨论】：

【解决方案3】：

我可以通过在此处安装 octopress autoprefixer 将其与 jekyll 3 一起使用： https://github.com/octopress/autoprefixer.

然后你输入： gems: [octopress-autoprefixer] 在您的配置文件中。我没有使用 octopress，我只是安装它来看看它是否可以工作。

在此过程中，我还安装了 node.js（在 pc 上，win 10），所以我可以安装 autoprefixer-rails。不确定 octopress 安装程序是否解决了这个问题，我只是在尝试随机的东西，看看它是否会起作用。我认为 node.js 是一个要求，因为我记得在我重新启动之前什么都没有发生，然后一切正常。

效果很好，虽然它确实减慢了我的构建时间 - 在一个通常在 0.5 秒内构建的小型网站上，它最多可以达到 12 秒。

【讨论】：

【解决方案4】：

autoprefixer-rails是Rails插件，与Jekyll无关，不能在Jekyll中使用。

如果您需要 Jekyll 中的类似功能，您目前没有其他选择，只能自己开发。您可以从 Rails 插件中获取部分代码，但 Jekyll 插件的工作方式明显不同。

【讨论】：

感谢您的回答。我知道 autoprefixer 是 Rails 插件，但 Jekyll 不是 Rail 应用程序吗？查看官方autprefixer-rails github repo Jekyll 甚至被称为“其他构建工具”。至少看起来两者似乎可以以某种方式结合，不是吗？
Jekyll 不是 Rails 应用程序，它是一个 Ruby 软件。 Jekyll 与 Rails 没有任何共同之处（除了它们是用相同的编程语言编写的）。
谢谢！所以我想我必须一个接一个地运行它们，太糟糕了。
@SimoneCarletti jekyll-assets 使用 autoprefixer-rails: github.com/jekyll/jekyll-assets#addons