Automate Haml & Sass with Sublime Text 2 for Windows

Question

I am a front-end guy using Windows for design and html/js/css coding. My work is separate from the back-end guy using .NET. I am also new to Haml/Sass thing as well as Ruby. And definitely not using Rails. After few search, I decided to pick Sublime Text 2 for Sass/Haml support and get rid of my old Notepad++. My first question is:

1. What is the best practice / efficiency to automatically convert whole folder of Haml (primary) and/or Sass to static documents (html/css)?

I have a separate solution for Sass by setting the "watch". I was searching for Haml automatic conversion solution and found few options: Library for making static websites with HAML/SASS/CSS framework

2. Should I use StaticMatic?

Google search said it is the best. But there seems no update for 2 years https://github.com/staticmatic/staticmatic

There is also this site (Is it the same?): http://staticmatic.rubyforge.org/how_to_use.html

If I use StaticMatic, I can setup a build system in Sublime Text to run from the Build Menu (http://docs.sublimetext.info/en/latest/file_processing/build_systems.html)

3. OR should I go with all-in-one solution like this (may cost few bucks)? Is there free one?

http://fireapp.handlino.com/

I don't mind to have Sass -watch running separately and another polling mechanism for Haml. I just want to make sure I have the "latest" out there.

Hope to get some advise for my unique situation. Thanks.

Answer 1

The answer is Middleman http://middlemanapp.com/

It's the replacement for out-dated StaticMatic

Answer 2

HAML:

For automatic conversion from haml to sass you can use this gist: https://gist.github.com/3898955. If you want to automate even more the workflow process, you can use https://github.com/alexnj/SublimeOnSaveBuild sublime package to run the command on file save.

SASS:

For SASS here is the needed setup. https://gist.github.com/3899112.

For automatic conversion on save, the same rules are applied here too, but it's important to include the .sass and .haml extension in SublimeOnSaveBuild.sublime-settings file.

So your file should look like this:

{
    "filename_filter": "\\.(css|js|sass|less|scss|jade|haml)$",
    "build_on_save": 1
}

You can extend this list at your own wish.