6

我已经有一个项目,其中包含各种文件夹中的 .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 观看。这意味着我可以去http://localhost:4000/index.html当事实上我有 index.haml 作为 Haml

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

  5. 我不想修改标头中的任何 .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 和其他工作的东西。有什么解决方法吗?

4

4 回答 4

2

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

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

但最好是拿一个_config.yml例子然后从那里开始。Basic Usage文档中描述了您所面临的情况。

从一个非常简单_config.yml的内容开始:

source:      source
destination: public

确保您的_plugins_layouts是该目录的source子目录。

如果您不创建自己的配置,则使用默认配置。如果您想使用此配置,请确保您的结构和工具集与之匹配:

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

任何包含 YAML 前端块的文件都将被 Jekyll 作为特殊文件处理。

如果你没有那个 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 前端。要实现这一点,除了 jekyll 处理之外,您还需要使用预处理器。我个人使用Jekyll Asset Pipeline Reborn。它易于设置,并具有一些不错的其他功能,例如将文件缩小和拼接在一起。

或者,由于您正在使用 grunt(我假设,由于您的标签),您可以使用 grunt 来预处理您的.scss.

于 2014-06-10T21:58:27.617 回答
0

我已经成功使用 fssm 并监听了我想要在我的资产管道之外的各种预编译器:

https://github.com/guard/listen

https://rubygems.org/gems/fssm

两者都将监视目录中的文件更改,然后在检测到更改时执行命令。您可以连接您的编译器以在这些事件上运行。

于 2014-06-10T18:07:57.423 回答
-1

HP,您是否尝试过使用 samvincent 的 Jekyll::HAML gem?在这里找到项目:

https://github.com/samvincent/jekyll-haml

设置非常简单。在项目的根目录中创建一个 _plugins 文件夹(看起来你已经这样做了),然后创建一个需要以下内容的 .rb 文件:

require "rubygems"
require "bundler/setup"
Bundler.require(:default)

构建页面时应转换 HAML。

于 2014-06-06T06:42:04.083 回答
-1

这些天来这个页面的任何人都有好消息,看起来 HAML 在最新版本的 Jekyll 中支持开箱即用!只需将您的文件名更改为.haml,您就应该是GTG

于 2016-01-13T01:05:37.180 回答