ruby - jekyll 观看 haml 和 sass

Question

我已经有一个在不同文件夹中包含 .haml 和 .scss 文件的项目。

我按照这里的指南 http://winstonyw.com/2013/02/24/jekyll_haml_sass_and_github_pages/ 创建了 _plugins/haml.rb 和 _plugins/sass.rb

我将我所有的 .scss 文件移动到 ./assets/css/ 文件夹中

为了确保，我还创建了 layouts 文件夹并将所有 .haml 文件放在其中。

我运行了 jekyll serve --watch 并且这些 .haml/.scss 文件没有在 _sites 中转换为 .html 或 .css 文件。我也无法通过浏览器访问它们。

我在这里试过这个文件，但对 https://gist.github.com/radamant/481456#file-haml_converter-rb 没有任何帮助

那么我做错了什么以及如何实时观看所有 .haml/.scss 文件？

我来自 middlemanapp 世界，所以 jekyll 对我来说是新的。

更新 1:

我的高级目标是:

1. 使用 Jekyll 通过 Sass 和 Haml 进行前端开发

2. 它必须监视文件中的更改

3. 它必须转换 .sass/。 scss 文件和 Haml 到 .css 和 .html 在 watch 上。这意味着我可以访问 http://localhost:4000/index.html 而实际上我有 index.haml 作为 Haml

4. 我的项目不遵循 Jekyll 文档中所述的目录结构(包括布局文件夹和其他文件夹)。这必须能够检测到其他文件夹中的.sass和.haml文件(我可以指定这个)

5. 我不想修改 header 中的任何 .sass 或 .scss 文件以使 Jekyll 检测到它。因为我已经有很多(来自 Bootstrap)

更新 2:

这是我的新_config.yml

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     .

基本上我想将所有 .haml 文件放在主文件夹中，而不是 layouts。在 _plugins 中，我有 _plugins/haml.rb 和 _plugins/sass.rb 如上所述。尽管如此，当我在主文件夹中创建示例 index1.haml 时它仍然不起作用，当 --watch

时它没有被转换

更新 3:

这是我的目录结构:

/www

 /_plugins

  haml.rb

  sass.rb

 /_layouts

  index1.haml

 _config.yml
 index1.haml

在 haml.rb 中:

module Jekyll
  require 'haml'
  class HamlConverter < Converter
    safe true
    priority :low

    def matches(ext)
      ext =~ /haml/i
    end

    def output_ext(ext)
      ".html"
    end

    def convert(content)
      engine = Haml::Engine.new(content)
      engine.render
    rescue StandardError => e
      puts "!!! HAML Error: " + e.message
    end
  end
end

在 index1.haml 中(两个文件内容相同):

!!!
%html
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width", name: "viewport"}/
    %title
  %body
    Test Test

在_config.yaml

---
source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts
---

这对我仍然不起作用。没有生成 .html 文件。

更新$:

将此添加到 .haml 文件有效:

---
title: Index
---

但是，我可以修改 .haml 文件，但我尽量避免对 .sass/.scss 文件这样做。我有很多来自 Bootstrap 和其他工作。有什么解决方法吗？

Answer 1

听起来您没有正确的 Jekyll 配置来指定您的 source 目录。

您可以通过参数指定配置来构建事物，如下所示:jekyll serve --source assets --destination public

但是从那里获取一个 _config.yml 示例可能会更好。 Basic Usage 中描述了您面临的情况文档。

从一个非常简单的 _config.yml 开始，其中包含:

source:      source
destination: public

确保您的 _plugins 和 _layouts 是 source 目录的子目录。

如果您不创建自己的配置，那么 default config用来。如果你想使用这个配置，确保你的结构和工具集匹配它:

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts
include:     ['.htaccess']
exclude:     []
keep_files:  ['.git','.svn']
gems:        []
timezone:    nil
encoding:    nil

future:      true
show_drafts: nil
limit_posts: 0
highlighter: pygments

relative_permalinks: true

permalink:     date
paginate_path: 'page:num'
paginate:      nil

markdown:      kramdown
markdown_ext:  markdown,mkdown,mkdn,mkd,md
textile_ext:   textile

excerpt_separator: "\n\n"

safe:        false
watch:       false    # deprecated
server:      false    # deprecated
host:        0.0.0.0
port:        4000
baseurl:     ""
url:         http://localhost:4000
lsi:         false

maruku:
  use_tex:    false
  use_divs:   false
  png_engine: blahtex
  png_dir:    images/latex
  png_url:    /images/latex
  fenced_code_blocks: true

rdiscount:
  extensions: []

redcarpet:
  extensions: []

kramdown:
  auto_ids: true
  footnote_nr: 1
  entity_output: as_char
  toc_levels: 1..6
  smart_quotes: lsquo,rsquo,ldquo,rdquo
  use_coderay: false

  coderay:
    coderay_wrap: div
    coderay_line_numbers: inline
    coderay_line_numbers_start: 1
    coderay_tab_width: 4
    coderay_bold_every: 10
    coderay_css: style

redcloth:
  hard_breaks: true

您还必须确保您希望 Jekyll 处理的每个页面都有适当的 YAML front-matter .

Any file that contains a YAML front matter block will be processed by Jekyll as a special file.

如果您没有 YAML 前端，您的插件将不会被应用。

它甚至可以是空的，比如

---
---

#haml

删除 ./_layouts/index1.haml 你不需要它。将 index1.haml 更改为:

---
title: Index
---

!!!
%html
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width", name: "viewport"}/
    %title
  %body
    Test Test

并从 _config.yml 中删除 --- 行——它应该是

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts

据我所知，使用 Jekyll 插件，没有一种方法可以处理 .scss 文件而不需要这些文件中的 YAML front-matter。要实现这一点，除了 jekyll 处理之外，您还需要使用预处理器。我个人使用Jekyll Asset Pipeline Reborn .它易于设置，并具有一些不错的其他功能，例如缩小文件和将文件拼接在一起。

或者因为你正在使用 grunt(我假设，由于你的标签)你可以 use grunt to preprocess your .scss .