pugの導入から基本的な書き方について

pugとは

HTMLを書くためのテンプレートエンジンです
HTMLの作成を簡単にするもの
タグで囲むことがない代わりに、改行やインデントで全体を構成する

pugファイル

div.hoge
  h2.hoge-title タイトル
  div.hoge-button
      a(href="#", target="_blank") リンク
  p.hoge-text テキスト

htmlにcompile

<div class="hoge">
  <h2 class="hoge-title">タイトル</h2>
  <div class="hoge-button"><a href="#" target="_blank">リンク</a></div>
  <p class="hoge-text">テキスト</p>
</div>

導入

pugを導入するにはnpm、またはgulpを使う

npmの場合

package.json

{
  "scripts": {
    "start": "yarn run watch:pug --watch",
    "build": "yarn run pug",
    "pug": "pug src/pug/ --hierarchy -o dist/html -P",
    "watch:pug": "pug src/pug/ --hierarchy -o dist/html -P -w"
  },
  "dependencies": {
    "pug": "^2.0.3",
    "pug-cli": "^1.0.0-alpha6",
    "pug-loader": "^2.4.0"
  }
}

scriptのoption

-h, --help             output usage information
-V, --version          output the version number
-O, --obj <str|path>   JSON/JavaScript options object or file
-o, --out <dir>        output the rendered HTML or compiled JavaScript to
                       <dir>
-p, --path <path>      filename used to resolve includes
-P, --pretty           compile pretty HTML output
-c, --client           compile function for client-side runtime.js
-n, --name <str>       the name of the compiled template (requires --client)
-D, --no-debug         compile without debugging (smaller functions)
-w, --watch            watch files for changes and automatically re-render
-E, --extension <ext>  specify the output file extension
-s, --silent           do not output logs
--name-after-file      name the template after the last section of the file
                       path (requires --client and overriden by --name)
--doctype <str>        specify the doctype on the command line (useful if it
                       is not specified by the template)
--hierarchy            階層構造を維持したまま出力

gulpの場合

package.json

{
  "scripts": {
    "start": "gulp watch",
    "build": "gulp build",
    "gulp": "gulp"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.2.0",
    "gulp-pug": "^4.0.1",
    "gulp-watch": "^4.3.5"
  }
}

gulpfile.js

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const pug = require('gulp-pug');

// pug
gulp.task('pug', () => (
  gulp.src([
    'src/pug/**/*.pug',
    '!src/pug/**/_*.pug', // includeファイルは対象外
  ])
  .pipe(plumber())
  .pipe(pug({
    pretty: true,
  }))
  .pipe(gulp.dest('./dist/'))
));

// watch
gulp.task('watch', () => {
  gulp.watch('src/pug/**/*.pug', ['pug']);
});

gulp.task('build', ['pug']);
gulp.task('default', ['pug']);

書き方

idとclassを指定

複数classを指定する場合はspaceなし

section#hoge.foo.fuga
  div.piyo

属性を指定

カッコで囲む
複数指定する場合はカンマで区切る

a(href="#", target="_blank")
video.m-video-01(src="./hoge.mp4", poster="hoge.png" autoplay loop)

テキストを書く

タグの後に書く場合は半角を空ける
改行する場合は「|」を使う

a(href="#", target="_blank") リンクテキスト
p
 | テキスト

includeで別ファイルを読み込む

includeのファイル名は大文字が使えない

include _include/_header

forを使う

- for (var i = 0; i < 3; i += 1)
  li
    a(href="#")
      img(src="test.jpeg", alt="")
    div
      h2 タイトル
      p テキスト

コメントアウト

// HTMLに残るコメント
//- HTMLに残らないコメント

//
  ブロックコメントです。
  このコメントはHTMLに残ります。
//-
  ブロックコメントです。
  このコメントはHTMLに残りません。

pugとは

導入

npmの場合

gulpの場合

書き方

idとclassを指定

属性を指定

テキストを書く

includeで別ファイルを読み込む

forを使う

コメントアウト

参考サイト