ど〜も〜、文明開化の足音を発するエンジニア 中尾こと、 Hawk(と呼ばれたい) です。

いよいよ、梅雨も明けて夏本格始動ですね!
「どうせ梅雨明け後の方が雨降るんだろ?」 というネガティブな発言はみなさん控えましょう(笑)

では、本題に参りましょう!
今回も引き続き、gulpを一からイジって見た企画 第肆話 〜見知らぬ、pug〜 になります!

過去の内容が気になる奇特な方はこちらからどうぞ!
> 第壱話を見てみる
> 第弐話を見てみる
> 第参話を見てみる

それでは、はりきっていきましょ〜!

pug?パグ?犬?ブサかわいい?

残念ながら今回は犬種の話はいたしません!!
pugとはHTMLのメタ言語です。
sassのHTML版だと思っていただければ結構です。
実はpugはちょっと前までjade という名前でした。
それが 大人のいざこざ でpugという名前になりました。
なので、記述方式はjadeとほとんど同じです。(一部異なるところがあります。)
まぁ、触ってみるとかなり便利でもうpugなしじゃ物足りなくなります。
こちらも 気が向いた時に 時間が許せば記事化しようと思いますが、
「もうっ!我慢できない!!」 という気骨ある英語が得意な方は下記の公式をごらんください。

Getting Started – Pug

それでは実際に設定していきましょう!

pugのインストール!

それでは、ブサかわ要員pugちゃんを呼びましょう!
いつも通りgulp_template と内に移動し、下記のコマンドを実行します。
もちろんmac使いは sudo 付きです。

npm install gulp-pug --save-dev

すると例に漏れず、package.jsondevDependenciesが下記のように変化しているかと思います。
だんだん、充実してきましたね!

  "devDependencies": {
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-pug": "^3.3.0",
    "gulp-sass": "^3.1.0"
  }

インストールも完了したので、使ってみましょう!

pugちゃんの準備!

それでは今回もまずはディレクトリとフォルダを準備していきます。
gulp_template
 └ src … 開発用ソース保存先
   └ pug … pugファイルの保存先
     └ index.pug … 今回使用するpugファイル

index.pugの中身は後述しますので、空で大丈夫ですよ!

そして、今までお世話になっていた下記を削除しましょう!サヨラナラー
gulp_template
 └ product
   └ index.html ⇦削除!!

pugちゃんのコンパイル設定をしよう!

前回同様、もろもろ設定していこうと思います!
もちろんイジるのは gulpfile.js!
早速、変数宣言部分を変更していきます!

var pug = require('gulp-pug');
var src = {
    'pug': ['./src/pug/**/*pug', '!./src/pug/**/_*pug'],
    'sass': './src/sass/**/*scss'
};
var dest = {
  'root': './product',
  'css': './product/css'
};

src変数内のpugの宣言方法が変わっていますよね?
これはファイル名の始まりに_(アンダーバー)が付くファイルは書き出さない という記述です。
pugを使用する場合、共通のheader,footer等はテンプレートとしてページごとに読み込む場合が多くなるかと思います。
その場合、header,footer等はHTMLファイルとして書き出して欲しくないので、この場合アンダーバーをつければ書き出されなくなります。
他にも方法はありますが、わかりやすいので自分はこの方式をとってます!

さて、お次はメイン部分です!

// pug
gulp.task("pug", function() {
    gulp.src(src.pug)//読み出したいパスを指定
        .pipe(plumber())//構文ミスがあっても監視を止めない
        .pipe(pug({pretty: true}))//pugのコンパイル形式を指定
        .pipe(gulp.dest(dest.root))//pugのコンパイル先を指定
        .pipe(browser.reload({stream:true}));//更新されたらブラウザを更新
});
// 監視用
gulp.task("default",['server'], function() {
    gulp.watch(src.sass,["sass"]);
    gulp.watch(src.pug,["pug"]);//pugが更新されたらpug関数を実行
});

sassの設定と似ていますよね?
ひとまずこんな感じです!

pugちゃんをイジってみよう!

いよいよブサかわアイドルpugちゃん をイジってみます!

まずは、gulp でgulpを起動します!
そして空っぽのpugファイルに下記を記述します。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title gulpの見本だよ!
    link(rel="stylesheet", href='./css/index.css')
  body
    main.index_main
      h1
        | gulpの見本だよ!

これで前回と同じ見た目が表示されるかと思います。
pugの特徴としては、基本的にはコードをインデントで書きます。
インデントを下げると、上のインデントの入れ子構造になります。
もちろん閉じタグを持たないimgタグの次の要素をインデント下げ入れ子にしようとすると構文エラーとなりコンパイルされません。
このように、みやすくコードを書けるのがpugの強みになります!

どうせだからメタ情報をjsonで管理しよう!

どうせならタイトルとかをjsonで管理したくないですか?

私はしたいです!

なので、もう少しgulpfile.js 周りをイジろうと思います!
gulpを停止して下記を実行!

npm install gulp-data --save-dev

そして、gulpfile.jsの変数宣言部分に下記を追記

var data = require('gulp-data');
var src = {
    'pug': ['./src/pug/**/*pug', '!./src/pug/**/_*pug'],
    'json': './src/config/',
    'sass': './src/sass/**/*scss'
};

そして、先ほど記述したpug部もちょっと変更します。

gulp.task("pug", function() {
    gulp.src(src.pug)
        .pipe(plumber())
        .pipe(data(function(file) {
            return { 'meta': require(src.json + 'meta.json')};//meta.jsonの読み込み
        }))
        .pipe(pug({pretty: true}))
        .pipe(gulp.dest(dest.root))
        .pipe(browser.reload({stream:true}));
});

さらに、meta.jsonを作成します。
gulp_template
 └ src … 開発用ソース保存先
   └ config … 設定ファイルの保存先
     └ meta.json … メタ設定のjson

中身はこんな感じにしておきましょう!

{
  "site_name": "サイトの名前",
  "description": "サイトの概要",
  "keywords": "サイトのキーワード1, サイトのキーワード2",
  "rootUrl": "",
  "favicon_url": "",
  "ogp_image_url": ""
}

これで準備完了です!
gulpで起動させましょう!

そこでindex.pugを開き、head内をを下記のように書き換えます。

  head
    meta(charset="utf-8")
    title=meta.site_name
    if meta.description //meta.descriptionに値が入っていれば実行
      meta(name="description", content=meta.description)
    if meta.keywords //meta.keywordsに値が入っていれば実行
      meta(name="keywords", content=meta.keywords)
    link(rel="stylesheet", href='./css/index.css')

これで、無事json内を呼び出せたかと思います!

注意点としてjsonを変更したい場合下記の手順を踏む必要があります。

  • gulpを停止させる。
  • meta.jsonを変更する。
  • gulpを再度立ち上げる。
  • 何かしらのpugファイルを更新する。

そこまで更新頻度は高くないのですが、ちょっと手間がかかりますね!

次回予告

pugという強力な仲間を手にいれたHawk(と呼ばれたい)
ついに最後の刺客javascriptが忍び寄る。
次回、最終章 「typescripttypescriptを、君に」
お楽しみに!

Shere
  • はてなブログ
  • Twitter
  • Facebook
今更ながら一からgulpなるものをイジって見た 第肆話 〜見知らぬ、pug〜

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。