Jekyll watch haml and sass

Question

I already had a project with .haml and .scss files in different 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 to the ./assets/css/ folder

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

I ran jekyll serve --watch and these .haml / .scss files were not converted to .html or .css files in _sites. I cannot access them through the browser.

I tried this file here and did not help https://gist.github.com/radamant/481456#file-haml_converter-rb

So what have I done wrong and how to watch all .haml / .scss files?

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

UPDATE 1 :

My high level goals:

• Use Jekyll to develop an interface with Sass and Haml

• He must keep track of changes in files.

• It should convert .sass /. scss files and Haml.css and .html on the clock. Sense I could go to http://localhost:4000/index.html , when in fact I have index.haml like Haml

• My project does not match the directory structure specified in the Jekyll doc (with layout folder and others). It should be able to detect .sass and .haml files in other folders (I can specify this)

• I do not want to change any .sass or .scss files in the header so that Jekyll can detect it. Because I already have tons (from Bootstrap)

UPDATE 2 :

Here is my new _config.yml

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

Basically, I want to have all .haml files in the main folder, not layouts . In _plugins , I have _plugins/haml.rb and _plugins/sass.rb , as mentioned above. However, it does not work when I created the index1.haml sample in the main folder, it did not convert 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 files have the 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 does not work for me. No .html files created.

UPDATE $ :

Adding this file to .haml files:

 --- title: Index --- 

However, I can modify .haml files, but I try to avoid this with .sass / .scss . I have a lot of them from Bootstrap and other works. Is there a workaround?

Answer 1

It looks like you do not have the correct Jekyll configuration specifying your source directory.

You can create things by specifying configuration through parameters, for example: jekyll serve --source assets --destination public

But it's probably best to take an example of _config.yml and go from there. The script itself that you encounter is described in Basic Use .

Start with a very simple _config.yml containing:

 source: source destination: public 

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

If you do not create your own config, then default config is used . If you want to use this configuration, make sure that your structure and toolbox match 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 each page that you want Jekyll processes has a corresponding YAML front-matter .

Any file containing a block of the front YAML element will be treated by Jekyll as a special file.

If you do not have this YAML control, your plugins will not apply.

It may even be empty, for example

 --- --- #haml 

Delete ./_layouts/index1.haml you do not 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 delete the lines --- from _config.yml - this should be

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

As far as I know, using the Jekyll plugin there is no way to process .scss files without requiring the front YAML objects in these files. For this you need to use a preprocessor in addition to jekyll processing. I personally use the Jekyll Asset Pipeline Reborn . It is easy to set up and has some good other features, such as stapling and stapling files.

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

Answer 2

I had success using fssm and listening to various precompilers that I wanted to use outside my pipeline:

https://github.com/guard/listen

https://rubygems.org/gems/fssm

Both will look at directories for file changes, and then execute commands when changes are detected. You can hook up your compilers to trigger these events.

Answer 3

HP, did you try to use the pearl Jekyll :: HAML from samvincent? Find the project here:

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

It is pretty simple to set up. Create the _plugins folder in the project root directory (it looks like you already did this), then create a .rb file that requires the following:

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

If you are creating a page, you must convert the HAML.

Answer 4

The good news coming to this page these days, it seems that HAML supports the box in the latest version of Jekyll! Just change the file name to .haml and you must be GTG