いい感じ。
成果物
前回まで
- http://ytyaru.hatenablog.com/entry/2018/03/26/000000
- http://ytyaru.hatenablog.com/entry/2018/03/27/000000
- http://ytyaru.hatenablog.com/entry/2018/03/26/000000
- http://ytyaru.hatenablog.com/entry/2018/03/27/000000
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タグを調べてサクっと書ける。可読性も高い。