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.这意味着我可以去http://localhost:4000/index.html实际上我有index.haml作为Haml

4. 我的项目不遵循Jekyll doc(带有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/ .scssfiles.我有很多来自Bootstrap和其他工作.有没有解决方法？

Answer 1

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

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

但最好还是抓住一个_config.yml例子并从那里开始。基本用法文档中描述了您所面临的场景。

从一个非常简单的内容开始_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 Front Matter 块的文件都将被 Jekyll 作为特殊文件进行处理。

如果您没有 YAML front-matter，您的插件将不会被应用。

它甚至可以是空的，比如

---
---

#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 （我认为，由于您的标签），您可以使用 grunt 来预处理您的.scss.