やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

HTMLテンプレートエンジンpugで最低限のHTMLを書いてみる

いい感じ。

成果物

GitHubpug.helloworld.201705180836

前回まで

pugをインストールした。

pug実行までの手順

$ export PATH=/..../npm_global/bin:$PATH
$ pug -V
pug version: 2.0.0-rc.1
pug-cli version: 1.0.0-alpha6

もしくは以下のように.bash_profile環境変数パスを追加する。

.bash_profile

export PATH=/..../npm_global/bin:$PATH
$ bash -l
$ pug -V

HTMLベース

base_IE.pug

doctype html
html(lang="ja")
    head
        meta(http-equiv="X-UA-Compatible" content="IE=edge")
        meta(charset="utf-8")
        meta(name="description" content="")
        meta(name="author" content="")
        meta(name="viewport" content="")
        link(rel="stylesheet" href="")
        // [[if lt IE 9]
        script(src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js")
        script(src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js")
        // [endif]
        link(rel="shortcut icon" href="")
    body

IE対応切り捨て

Microsoft製ブラウザIE用に余計な対応を迫られてコードが汚くなる。おもいきって切り捨てるとスッキリする。

base.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        meta(name="description" content="")
        meta(name="author" content="")
        meta(name="viewport" content="")
        link(rel="stylesheet" href="")
        link(rel="shortcut icon" href="")
    body
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="description" content=""><meta name="author" content=""><meta name="viewport" content=""><link rel="stylesheet" href=""><link rel="shortcut icon" href=""></head><body></body></html>

pug→html

$ pug base.pug

  rendered base.html

base.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="description" content=""><meta name="author" content=""><meta name="viewport" content=""><link rel="stylesheet" href=""><link rel="shortcut icon" href=""></head><body></body></html>

改行が欲しい時は以下。

$ pug -P base.pug

  rendered base.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
  </head>
  <body></body>
</html>

pug –help

pugのヘルプ。

$ pug --help

  Usage: pug [options] [dir|file ...]

  Options:

    -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
    -b, --basedir <path>   path used as root directory to resolve absolute includes
    -P, --pretty           compile pretty HTML output
    -c, --client           compile function for client-side
    -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)

  Examples:

    # Render all files in the `templates` directory:
    $ pug templates

    # Create {foo,bar}.html:
    $ pug {foo,bar}.pug

    # Using `pug` over standard input and output streams
    $ pug < my.pug > my.html
    $ echo 'h1 Pug!' | pug

    # Render all files in `foo` and `bar` directories to `/tmp`:
    $ pug foo bar --out /tmp

    # Specify options through a string:
    $ pug -O '{"doctype": "html"}' foo.pug
    # or, using JavaScript instead of JSON
    $ pug -O "{doctype: 'html'}" foo.pug

    # Specify options through a file:
    $ echo "exports.doctype = 'html';" > options.js
    $ pug -O options.js foo.pug
    # or, JSON works too
    $ echo '{"doctype": "html"}' > options.json
    $ pug -O options.json foo.pug

課題

所感

これはいい。HTMLタグを調べてサクっと書ける。可読性も高い。