サイト制作に関するメモ書き

HOME > HTML・CSS > gulpでPugを使ってみる

gulpでPugを使ってみる

Pug(元Jade)のテンプレートエンジンをgulp使てみます。

設定方法

gulpのインストールと作業ディレクトリへの移動は省略します。
gulpのインストールなどはこちらの記事を参考にしてください。

gulp-pugをインストールします。

npm install gulp-pug --save-dev

gulpfile.jsに以下のように記述します。

var gulp = require('gulp'),
    pug  = require('gulp-pug');

gulp.task('pug', function() {
  gulp.src(
    ['./pug/**/*.pug', '!./pug/**/_*.pug']
  )
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('./develop'))
});

pugディレクトリを作成して、そのディレクトリ内でindex.pugを作成します。

index.pug

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    link(rel="stylesheet", href="css/style.css")
    title テストページ
  body
    .contents
      h1.ttl Pugのテストです。

以下のコマンドを実行します。

gulp pug

以下のようなindex.htmlが生成できました。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>テストページ</title>
  </head>
  <body>
    <div class="contents">
      <h1 class="ttl">Pugのテストです。</h1>
    </div>
  </body>
</html>

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP