Pugの簡単な導入方法・使い方をさらっと勉強する - UdemyでPythonを勉強した結果を残すブログ。

フロントエンドの仕事につけたので、

フロントエンドの色々も忘れないように追加していく。

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">何もないと&lt;div&gt; になる<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の説明終わります。

各々詳しくはリンク先で確認推奨！