フロントエンドの仕事につけたので、
フロントエンドの色々も忘れないように追加していく。
pugの導入方法から。
依頼される企業さんの中にはpugを使っているところもあるのでさらっと。
バージョン4とバージョン3で書き方違うところがあるのでそこも忘れないように。
pugjs.org
Pugの特徴
- 閉じタグを記述しなくてよい
- インデントで階層分けができる
- インクルードなどもできる
- 変数を使ったり関数が使える
参考URL
and-ha.com
記述方法
- var fcred ="red"
section
h1.title(style=`color:${fcred}`) タイトル
.div
| 何もないと#{"<div>"} になる
br
| 複数行書くときは | を使う
p divじゃないときは要素を追加する
.link-area
a(href="#") リンクはこれ
ul.ul-list
li.list リスト1
ul.each-list
-
var menus = [
{num: 1,txt: 'top',},
{num: 2,txt: 'about',},
{num: 3,txt: 'contact',}
]
each menu in menus
li #{menu.txt}
// htmlに出すコメントアウト
//- htmlに出さないコメントアウト
出力されると
<section>
<h1 class="title" style="color:red">タイトル</h1>
<div class="div">何もないと<div> になる<br>複数行書くときは | を使う</div>
<p>divじゃないときは要素を追加する</p>
<div class="link-area"><a href="#">リンクはこれ</a></div>
<ul class="ul-list">
<li class="list">リスト1</li>
</ul>
<ul class="each-list">
<li>top</li>
<li>about</li>
<li>contact</li>
</ul><!-- htmlに出すコメントアウト-->
</section>
こうなる。 上の記述方法の説明は以下はこちら。
- クラス名から始まると、出力は
<div class="div">...</div>となる。
- .クラス名でクラスがつけられる。
div(style="color:red")みたいに要素の後ろにかっこをすると属性が追加できる。
リンクのhrefとか- 配列などの変数・関数も使え、if・eachなどを駆使してさらに効率的にコーディングもできる
- コメントアウトにはhtmlに残すもの・残さないものと２パターン選べる
インクルードができる
_inc/_header.pug
header ヘッダーブロックです
include _inc/_header.pug
p 上にヘッダーブロックが入ります
includeのあとにインクルードしたパスの場所を入れると
共通しているものをインクルードができる。
出力すると下記のようになる。
<header>ヘッダーブロックです</header>
<div>上にヘッダーブロックが入ります</div>
デフォルトのテンプレートを使ってレイアウトを継承できる
詳しくはこちら。
Pugのextendsとblockを使ってテンプレートを継承する | cly7796.net
テンプレート的なpuを用意して、extendsで呼び込むと
そのレイアウトをそのまま使えちゃう機能。
_ext/_layout.pug
doctype html
html(lang="ja")
block head
head
meta(charset="utf-8")
title デフォルトのタイトルです。
body
block header
header.header
p.logo デフォルトのヘッダーです。
block content
.content
p デフォルトのコンテンツです。
block footer
footer.footer
p デフォルトのフッターです。
このテンプレートをservice/index.pug に呼び込んで作成すると
ソースを継承してカスタマイズができる。
カスタマイズができる部分はblock下層部分。
extends ../_ext/_layout.pug
block title
title サービスのページです。
block header
p.logo サービスのヘッダーです。
block content
.content
p サービスのコンテンツです。
カスタマイズなしで出力すると、_layout.pugのままのソースがでる。
導入方法
ハコイリオヤジさんの記事を見ながら。ありがとうございます。
というかハコイリさんの方がわかりやすいと思う
hakoirioyaji.com
主にgulpとかと合わせて導入するので、それで導入する方法を書いていく
まずgulpのインストール
npm i -D gulp gulp-notify gulp-plumber gulp-debug
次にpugのインストール
npm i -D gulp-pug gulp-html-beautify gulp-filter
gulpfile.jsを作成し、以下コピー
const gulp = require('gulp');
const notify = require('gulp-notify'); // エラー通知
const plumber = require('gulp-plumber'); // エラー時のタスク停止防止
const debug = require('gulp-debug'); // ログ表示
const filter = require('gulp-filter'); // ファイルフィルター
const pug = require('gulp-pug'); // Pug
const htmlbeautify = require('gulp-html-beautify'); // HTML整形
const paths = {
pug: {
src: 'src/pug/**/*.pug', // コンパイル対象
dest: 'public/' // 出力先
}
}
/**
* pugタスク
*/
function pugCompile() {
return gulp.src(paths.pug.src)
.pipe(plumber({
errorHandler: notify.onError('Error: <%= error.message %>')
}))
.pipe(filter(function (file) { // _から始まるファイルを除外
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
.pipe(pug())
.pipe(htmlbeautify())
.pipe(gulp.dest(paths.pug.dest))
.pipe(debug({title: 'pug dest:'}));
}
/**
* watchタスクで実行する関数
*/
function watch() {
return gulp.watch(paths.pug.src, gulp.series(pugCompile))
}
exports.pug = pugCompile; // pugタスク
exports.watch = gulp.series(watch); // watchタスク
exports.default = gulp.series(pugCompile); // defaultタスク
gulp watch でpugが保存されるたびにhtml出力してくれるようになる
gulp watch
※ここでgulpのエラーがいっぱいでたのでとても苦戦する。。
mac でgulpのcliバージョンが3.9.1だったらアンインストールして、
gulp-cliはインストールせずにgulpのみインストールする。
グローバルもなくていい。プロジェクト毎にインストールすべし
コンパイル対象のフォルダを作り、pugファイルを作る
'src/pug/*/.pug', /と設定されているので、
srcフォルダ、下層にpugフォルダも追加し、index.pugを追加してみる。
doctype
html(lang="ja")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
meta(name="viewport", content="width=device-width, initial-scale=1")
meta(name="description", content="")
meta(name="keywords", content="")
meta(name="author", content="")
meta(property="og:title", content="タイトル")
meta(property="og:type", content="website")
meta(property="og:url", content="http://任意のURL")
meta(property="og:image", content="http://任意のURL/og_image.png")
meta(property="og:site_name", content="")
meta(property="og:description", content="")
meta(property="fb:app_id", content="任意のID")
title タイトル
link(rel='stylesheet', href="css/style.css")
script.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'example.com');
ga('send', 'pageview');
body
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
script.
(window.jQuery || document .write('<script src="js/jquery-1.11.2.min.js"><\/script>'));
script(src="js/scripts.js")
これで出力される。はず。
大まかなpugの説明終わります。
各々詳しくはリンク先で確認推奨！
