pugのメリット【実用編】

2022/5/3 環境構築

このエントリーをはてなブックマークに追加
Pocket

今回はpugのメリットと書き方を紹介したいと思います。

長くなりますけど、中身は簡単な記述しかしてないので、飽きずに目を通してもらえればと思います。

 

<pugのメリット>

①閉じタグを省略できる

②変数が使える

③ifとかが使える

④includeとかが使える

他にも多数できることがありますが、④のinclude等を使用して、webサイトを作成するときの雛形(テンプレートファイル)を作成します。

ファイル構成について

ファイル構成(task実行前)

プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ node_modules
|___ pug
| |___ _layout.pug
| |___ _header.pug
| |___ _footer.pug
| |___ _meta.pug
| |___ index.pug
| |___ contents1.pug
|___ sass
| |___ common.scss
| |___ index.scss
| |___ contents1.scss
|___ www
  |___ css

 

gulpfile.jsの中身

//plug-in
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');
var sass = require("gulp-sass");
var pug = require('gulp-pug');


//sass 
gulp.task("sass", function() {
    gulp.src("sass/**/*.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest("www/css"));
});

//pug
gulp.task("pug", function() {
    gulp.src('pug/**/[^_]*.pug')
        .pipe(plumber())
        .pipe(pug({
          pretty: true
        }))
        .pipe(gulp.dest("www"));
});


//watch
gulp.task('watch', function(){
    gulp.watch('sass/**/*.scss', ['sass']);
    gulp.watch('pug/**/*.pug', ['pug']);
});

//task実行
gulp.task('default', ['sass', 'pug', 'watch']);

前回(pugとsassを使う方法【準備編】http://webya.site/preparation-pug-sass/)と変更した点

①//gulp gulp.src(‘pug/**/[^_]*.pug’) _がついていないpugファイルをコンパイル

②//gulp .pipe(pug({pretty: true}) htmlファイルを整形

 

 

ファイル構成(task実行後)

プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ node_modules
|___ pug
| |___ _layout.pug
| |___ _header.pug
| |___ _footer.pug
| |___ _meta.pug
| |___ index.pug
| |___ contents1.pug
| |___ index.html
| |___ contents1.html
|___ sass
| |___ common.scss
| |___ index.scss
| |___ contents1.scss
|___ www
  |___ css
  | |___ common.css
  | |___ index.css
  | |___ contents1.css
  |___ index.html
  |___ contents1.html

task実行後に、wwwフォルダcommon.css、index.css、contents1.css、index.html、contents1.htmlが作成されていれば成功

pugの解説

続いて、pugの各ファイルの解説です。

 

_layout.pug

doctype html
html(lang='ja')
  head
    meta(charset="utf-8")
    include _meta
    block _addMeta

  body
    include _header

    block mainContents

    include _footer

ポイント

・include ○○　で_meta.pug、_header.pug、_footer.pugを読み込み

・block ○○　で_addMeta、mainContentsの中身に書いてある要素を読み込み

 

 

_header.pug

//header
header
  p.moji headerだよ

_footer.pug

//footer
footer
  p.moji footerだよ

_meta.pug

//-metaCommon
title タイトル
link(rel="stylesheet", href="css/common.css")

ポイント

・headerとfooter以降に、要素を書き足していけばOK

・_meta.pugにはwebサイトのどのページも共通するcssとか、titleとかを書いていく

 

 

index.pug

extends _layout.pug

block _addMeta
  //-meta
  link(rel="stylesheet", href="css/index.css")

block mainContents
  //main
  main
    .example1
    .example2

ポイント

・extends ○○で _layou.pugの形式を適用

・block _addMeta の中身を定義(index.htmlだけで読み込むcssを決定)

・block mainContents の中身を定義

 

contents1.pug

extends _layout.pug

block _addMeta
  //-meta
  link(rel="stylesheet", href="css/contents1.css")

block mainContents
  //main
  main
    .example3
    .example4

ポイント

・extends ○○で _layou.pugの形式を適用

・block _addMeta の中身を定義(contents1.htmlだけで読み込むcssを決定)

・block mainContents の中身を定義 wwwのhtmlの中身

 

コンパイル後のhtml

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header>
      <p class="moji">headerだよ</p>
    </header>
    <!--main-->
    <main>
      <div class="example1"></div>
      <div class="example2"></div>
    </main>
    <!--footer-->
    <footer>
      <p class="moji">footerだよ</p>
    </footer>
  </body>
</html>

＜読み込んだCSSの中身＞

○common.css

.moji {
  color: blue; }

○index.css

.example1 {
	display: block;
	width: 200px;
	height: 200px;
	background-color: green;
}

.example2 {
	display: block;
	width: 200px;
	height: 200px;
	background-color: whitesmoke;
}

index.htmlをブラウザ見ると下のようになります

headerだよ

 
 

footerだよ

 

contents1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/contents1.css">
  </head>
  <body>
    <!--header-->
    <header>
      <p class="moji">headerだよ</p>
    </header>
    <!--main-->
    <main>
      <div class="example3"></div>
      <div class="example4"></div>
    </main>
    <!--footer-->
    <footer>
      <p class="moji">footerだよ</p>
    </footer>
  </body>
</html>

<読み込んだCSSの中身>

○common.css

.moji {
  color: blue; }

○contents1.css

.example3 {
  display: block;
  width: 200px;
  height: 200px;
  background-color: whitesmoke; }

.example4 {
  display: block;
  width: 200px;
  height: 200px;
  background-color: green; }

 

contents1.htmlをブラウザ見ると下のようになります

headerだよ

 
 

footerだよ

雛形の作成は以上です。これで少しはコーティングの環境がサクサクになったのではないでしょうか。他のサイトをみると、もっと効率のよいテンプレートが用意されているので、少しずつ改善していきたいと思います。

 

ps

まだまだpugを使いこなせていない～