pug入門

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

## pugとは

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

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

``` html: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の場合


``` json: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の場合

``` json: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"
  }
}
```

``` javascript: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)
```

### テキストを書く

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

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

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

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

``` html
include _include/_header
```

### forを使う

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

### コメントアウト

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

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

## 参考サイト

- [pug-cli](https://www.npmjs.com/package/pug-cli)
- [【Pug】ゴリラでもわかるJade改めPug入門](https://blog.mismithportfolio.com/web/20160326pugbegin)
- [【Jade/Pug】gulpでJade / Pugをコンパイルする](https://blog.mismithportfolio.com/web/20160618gulpjadepug)
- [Pug(Jade)記法でHTMLのテンプレート的なの](https://qiita.com/soarflat/items/a80bdca813ae83bc9ebc)
- [Pugでコメントアウトをする](http://cly7796.net/wp/css/comment-out-by-pug/)