Haml support isn’t built into yeoman so I had to practice a bit of hackery to get my preferred setup.

It took about a hour to figure this out but infrastructure tasks are worth the effort.

Here are some notes from the process:


About the Gruntfile:

Load grunt-haml in module.exports

1
2
3
...
grunt.loadNpmTasks('grunt-haml');
...

Add a task inside of grunt.initConfig

1
2
3
4
5
6
...
 haml: {
   files: ['<%= yeoman.app %>/views/*'],
   tasks: ['haml']
 },
...

Detect haml file extensions for livereload

1
2
3
4
5
6
7
8
9
10
11
...
livereload: {
  files: [
    '<%= yeoman.app %>/{,*/}*.{html, haml}',
    '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
    '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
    '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
  ],
  tasks: ['livereload']
}
...

Set haml file targets

1
2
3
4
5
6
7
8
9
10
11
12
...
haml: {
  index: {
    src: "app/index.haml",
    dest: "app/index.html"
  },
  main: {
    src: "app/views/main.haml",
    dest: "app/views/main.html"
  }
}
...

It would be nice to have dynamic file targeting.

Check out this thread for more information.

Comments