まずHamlとは何ぞやという点からですが、まずは下記Hamlコードをご覧ください。
!!!
%html
%head
%title Haml test
%body
%h1 Haml test
%p honyarara
%ul.list
- 3.times do |i|
%li list #{i}
HTMLが分かる人なら何が起こるであろうか何となく分かると思います。
これをコンパイルすると下記HTMLに出力されます。
<!DOCTYPE html>
<html>
<head>
<title>Haml test</title>
</head>
<body>
<h1>Haml test</h1>
<p>honyarara</p>
<ul class='list'>
<li>list 0</li>
<li>list 1</li>
<li>list 2</li>
</ul>
</body>
</html>
HamlはSassなどと同様の、HTMLコーディングを効率化するためのメタ言語です。
Hamlは閉じタグが必要なく記述量が減るほか、タブインデントで入れ子を認識しているため誰が書いても同じ構成になりやすく、HTMLは自動出力なのでソースフォーマットの統一も自動で行われます。
似たようなコーディング短縮はEmmetでも可能ですが、Hamlの場合はコンパイル元ファイルが残る点が大きく異なります。
インストール前の前提
- Rubyをイントールしている
- gruntが既に使える
- WebStorm利用推奨（楽なだけで無くても良い）
Hamlのインストール
ターミナル（コマンドプロンプト）より下記コマンドでインストール
gem install haml
gruntプラグインのインストール
ターミナル（コマンドプロンプト）より下記コマンドでインストール
npm install grunt-haml --save-dev
Gruntfile.jsの編集
module.exports = function (grunt) {
var pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
haml: {
dist: {
files: {
'html/test.html': 'haml/test.haml'
}
}
},
watch: {
files: ['haml/*.haml'],
tasks: ['haml']
}
});
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
「initConfig」以下でhamlのタスクを加え、自動化されるようwatchにもhamlのタスクを指定している形です。 上記例の場合は「haml」フォルダ内の「test.haml」に変更があれば、「html」フォルダ内の「test.html」として出力しています。
