jekyll to watch haml and sass

Question

I already had a project with .haml and .scss files in various folders.

I followed this guide here http://winstonyw.com/2013/02/24/jekyll_haml_sass_and_github_pages/ to create _plugins/haml.rb and _plugins/sass.rb

I moved all my .scss files into ./assets/css/ folder

To make sure, I also created layouts folder and put all .haml files in there.

I ran jekyll serve --watch and these .haml / .scss files didn't get converted to .html or .css files in _sites. I cannot access them via the browser either.

I tried this file here and didn't help either https://gist.github.com/radamant/481456#file-haml_converter-rb

So what did I do wrong and how to watch live all .haml / .scss files?

I came from middlemanapp world so jekyll is new to me.

UPDATE 1:

My high level goals are:

1. Use Jekyll for frontend development with Sass and Haml

2. It must watch for changes in files

3. It must convert .sass / . scss files and Haml to .css and .html on watch. Meaning I could go to http://localhost:4000/index.html when in fact I have index.haml as Haml

4. My project doesn't follow the directory structure said in Jekyll doc (with layouts folder and others). This must be able to detect .sass and .haml files in other folders (I can specify this)

5. I don't want to modify any .sass or .scss files in the header to make Jekyll to detect it. Because I have tons of those (from Bootstrap) already

UPDATE 2:

Here is my new _config.yml

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

Basically I want to have all .haml files at the main folder, not layouts. In _plugins I have _plugins/haml.rb and _plugins/sass.rb as said above. Still, it doesn't work when I created a sample index1.haml in the main folder, it didn't get converted when --watch

UPDATE 3:

Here is my directory structure:

/www

 /_plugins

  haml.rb

  sass.rb

 /_layouts

  index1.haml

 _config.yml
 index1.haml

In 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

In index1.haml (both file has same content):

!!!
%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

In _config.yaml

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

This still doesn't work for me. No .html files generated.

UPDATE $:

Adding this to .haml files work:

---
title: Index
---

However, I can modify .haml files but I try to avoid doing that with .sass / .scss files. I have tons of them from Bootstrap and other work. Is there any workaround?

Answer 1

It sounds like you don't have a proper Jekyll configuration specifying your source directory.

You can build things by specifying the config via parameters, like so: jekyll serve --source assets --destination public

But it's probably better to grab a _config.yml example and go from there. The very scenario you're facing is described in the Basic Usage docs.

Start with a very simple _config.yml containing:

source:      source
destination: public

Make sure that your _plugins and _layouts are children of the source directory.

If you don't create your own config, then a default config is used. If you want to use this config, make sure your structure and toolset matches it:

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

You must also ensure that every page that you want to be processed by Jekyll has the appropriate YAML front-matter.

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

If you don't have that YAML front-matter, your plugins won't be applied.

It can even be empty, like

---
---

#haml

Delete ./_layouts/index1.haml you don't need it. Change index1.haml to this:

---
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

And remove the --- lines from _config.yml -- it should be

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

As far as I know, using a Jekyll plugin, there is not a way to process the .scss files without requiring the YAML front-matter in those files. To achieve this you need to use a preprocessor in addition to the jekyll processing. I personally use Jekyll Asset Pipeline Reborn. It's easy to setup and has some nice other features like minifying and stitching files together.

OR since you are using grunt (I assume, due to your tag) you could use grunt to preprocess your .scss.