Slimの導入と「gulp-slim」を使ったビルドまで

2015.11.26

Slimとは

Slimは、HTMLを効率的に書けるようにするテンプレートエンジンです。
テンプレートエンジンとはテンプレートに入力したデータを合成して、文字列を出力する仕組みのことをいいます。
最終的にはHTMLとして出力されます。
今回は導入から「Gulp.js」のプラグイン「gulp-slim」を使用したビルドまでを紹介します。

まずインストール

Slimはまず「Ruby」が入っていないと動きません。Macユーザーの方はそのままで問題無いですが、Winユーザーで入っていない方は、インストールが必要です。今回は省略します。

それではSlimをインストールしていきます。
なお、下記のコマンドはMac用です。

sudo gem install slim

Slimを使ってみる

Slimは通常のHTMLとは記法が異なります。
拡張子も「.slim」となります。

大まかな違いは下記かと思います。

閉じタグが無い
「<」,「>」がいらない
classは「.」、IDは「#」で記述
改行が「|」になる
インデントがそのまま階層になる
Rubyの記法が使える

例えば
Slimで下記のように記述したとします。

doctype html
html
  head
    meta charset="utf-8"
    title タイトル
  body#body
    p.text01 テキスト
    p.text02
      | テキスト
        テキスト下
    img src="images/photo.jpg" alt="ダミー"

ビルドすると下記になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title>
  </head>
  <body id="body">
    <p class="text01">
      テキスト
    </p>
    <p class="text02">
      テキスト
      テキスト下
    </p>
    <img alt="ダミー" src="images/photo.jpg" />
  </body>
</html>

gulp-slimをインストール

「gulp」までのインストールは終わっている想定で進めます。
下記コマンドで「gulp-slim」をインストールします（Mac）

sudo npm install --save-dev gulp-slim

「gulp-slim」はとても便利なプラグインで、ビルドはもちろん、インクルードも使えます。
他にも様々なオプションがあります。
Slimで管理できるようになるとインクルードファイルの更新のみで済むので大変便利です。

gulp-slimを使ってみる

ディレクトリ内のフォルダ構成は下記です。

— includes
— index.slim

「includes」フォルダの中には「header.slim」と「footer.slim」が入っているとします。

header.slim

header.header
  p ヘッダーテキスト

footer.slim

footer.footer
  p フッターテキスト

「gulpfile.js」は下記のように記述します。
エラーがあった後もファイルの監視を続けるために「gulp-plumber」というプラグインも入れています。

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var slim = require("gulp-slim");

gulp.task('slim', function(){
  gulp.src('*.slim')
    .pipe(plumber())
    .pipe(slim({
      pretty: true,
      require: 'slim/include',
      options: 'include_dirs=["includes"]'
    }))
    .pipe(gulp.dest(""));
});

gulp.task('default', function() {
  gulp.watch(['*.slim','includes/*.slim'],['slim']);
});

「pretty」がないとHTMLが圧縮された状態で出力されます。
「require」ではインクルードのプラグインの呼び出し、
「options」ではインクルードファイルのディレクトリを指定しています。
あとはファイルを監視して、変更があったときにビルドするようになっています。
コマンドは下記です。（止めるにはcontrol + c）

gulp

「index.slim」では「include」でファイルを呼び出します。

doctype html
html
  head
    meta charset="utf-8"
    title タイトル
  body
    include header
    main
      p メインテキスト
    include footer

ファイルを編集、保存すると同じディレクトリ内に「index.html」が出力されます。
ソースは下記で成形されているはずです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title>
  </head>
  <body>
    <header class="header">
      <p>
        ヘッダーテキスト
      </p>
    </header>
    <main>
      <p>
        メインテキスト
      </p>
    </main>
    <footer class="footer">
      <p>
        フッターテキスト
      </p>
    </footer>
  </body>
</html>

制作用のSlimテンプレート

制作に使えそうなSlimのテンプレートを作ってみました。
Rubyの記法も使えるので変数と条件分岐を書いています。
変数を変えたり色々と編集して使ってもらえたらと思います。

- Sitename = "sitename"
- Pageurl = "pageurl"
- Title = "Title"
- Description = "description"
- Canonicalurl = "canonical"
- Alternateurl = "alternate"
/ Linktype >>> 1(canonical), 2(alternate), 3(none)
- Linktype = 3
/ OGPtype >>> 1(website), 2(article)
- OGPtype = 1

doctype html
html lang="ja" prefix="og: http://ogp.me/ns#"
  head
    / canonical or alternate or none
    - case Linktype
    - when 1
      link rel="canonical" href = Canonicalurl
    - when 2
      link rel="alternate" media="only screen and (max-width: 640px)" href = Alternateurl
    - when 3
    / for iE
    /![if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge' /><![endif]
    meta charset="utf-8"
    meta name="viewport" content="width=device-width, initial-scale=1"
    title = Title
    meta name="description" content = Description
    / OGP
    - case OGPtype
    - when 1
      meta property="og:type" content="website"
    - when 2
      meta property="og:type" content="article"
    meta property="og:site_name" content = Sitename
    meta property="og:url" content = Pageurl
    meta property="og:title" content = Title
    meta property="og:description" content = Description
    meta property="og:image" content = "#{Pageurl}images/ogp.png"
    meta property="og:locale" content="ja_JP"
    / js
    script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
    javascript:
      window.jQuery || document.write('<script src="js/jquery-1.11.3.min.js"><\/script>')
    script src="/js/index.js"
    / CSS
    link rel="stylesheet" href="css/style.css"
  body
    include header
    main
    include footer

さいごに

Slimは他にも色々な使い方ができます。
自分の使い方にあった記述方法を見つけて下さい。
あとは、使用しているエディタがSlimに対応しているか確認しましょう。シンタックスハイライトもあったほうがよいかと思います。