【Jade/Pug】gulpでJade / Pugをコンパイルする

Posted on2016年6月18日 Edit on2016年10月13日 by misumi_takuma

以前書いたJade / Pugの記事の続きで、今回はgulpでコンパイルする方法です。

【Jade】ゴリラでもわかるJade入門〜Jadeを使ってみる〜

【Pug】ゴリラでもわかるJade改めPug入門

gulpのインストール

gulpのインストールについては、以下の記事に書いてます。

【gulp】初めてでもできるgulpの導入ととりあえず使ってみるまで

すでに入ってる人はとばしてください。

以下、ターミナルorコマンドプロンプトでプロジェクトフォルダに移動している前提での話です。

gulp-jade

進める前に今回のディレクトリ構成は以下のようにしています。

./package.json
./gulpfile.js
./jade/index.jade
./jade/template/_header.jade
./html/
./node_modules/

gulpを使ったJadeのコンパイルには「gulp-jade」を使います。

ターミナルorコマンドプロンプトで以下コマンドを打ちます。

npm install gulp-jade --save-dev

gulp-jadeのインストールができたら、gulpfile.jsに以下を記述します。

var jade = require('gulp-jade');
gulp.task('jade', () => {
  return gulp.src(['./jade/**/*.jade', '!./jade/**/_*.jade'])
  .pipe(jade({
    pretty: true
  }))
  .pipe(gulp.dest('./html/'));
});

!./jade/**/_*.jadeと書くことで、_から始まるファイルはコンパイル対象外になります。
インクルード用のファイルをコンパイルしないようにするためです。

また、オプションで「pretty:true」とすることで、
見やすいコードでかき出してくれます。

次に、jadeファイルを用意します。

index.jade

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Jadeテスト
  body
    include template/_header
    main.main
      h2.content_ttl メインタイトル

_header.jade

header.header
  h1.sitettl Jadeテストサイトタイトル
  nav
    ul
      li
        a(href="#") Top
      li
        a(href="#") About
      li
        a(href="#") Works
      li
        a(href="#") Contact

そして、以下のコマンドでコンパイルします。

gulp jade

すると、このように書き出されました！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>Jadeテスト</title>
  </head>
  <body>
    <header class="header">
      <h1 class="sitettl">Jadeテストサイトタイトル</h1>
      <nav>
        <ul>
          <li><a href="#">Top</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Works</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main class="main">
      <h2 class="content_ttl">メインタイトル</h2>
    </main>
  </body>
</html>

簡単ですね。

gulp-pug

進める前に今回のディレクトリ構成は以下のようにしています。

./package.json
./gulpfile.js
./pug/index.pug
./pug/template/_header.pug
./html/
./node_modules/

gulpを使ったPugのコンパイルには「gulp-pug」を使います。

ターミナルorコマンドプロンプトで以下コマンドを打ちます。

npm install gulp-pug --save-dev

gulp-pugのインストールができたら、gulpfile.jsに以下を記述します。

var pug = require('gulp-pug');
gulp.task('pug', () => {
  return gulp.src(['./pug/**/*.pug', '!./pug/**/_*.pug'])
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('./html/'));
});

!./pug/**/_*.pugと書くことで、_から始まるファイルはコンパイル対象外になります。
インクルード用のファイルをコンパイルしないようにするためです。

また、オプションで「pretty:true」とすることで、
見やすいコードでかき出してくれます。

次に、Pugファイルを用意します。

index.pug

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Pugテスト
  body
    include template/_header
    main.main
      h2.content_ttl メインタイトル

_header.pug

header.header
  h1.sitettl Pugテストサイトタイトル
  nav
    ul
      li
        a(href="#") Top
      li
        a(href="#") About
      li
        a(href="#") Works
      li
        a(href="#") Contact