HOME > TECHNOLOGY > 開発環境

pugで爆速HTMLコーディング!【WEBデザイナーのためのMac強化計画 #6】

Mac強化計画⑥

私がpugパグを使い始めたのは2012年ごろからです。
当時はまだjadeという名前でしたが、HamlEjsといった競合とも比較検討し一番手に馴染んだので、それ以来ずっとpug一筋です。

pug

逆にいうと、それだけ良いツールだと言えるのではないのでしょうか?

それでは早速インストールしていきましょう。

pugのインストール

前回はGulpとライブリロード環境をインストールしました。

ライブリロード環境(ローカルサーバー)の構築【WEBデザイナーのためのMac強化計画 #5】
HTMLの開発にはhttpプロトコルで表示できるサーバー環境が必要になります。
最近のワークフローではライブリロード環境を構築して、自動でブラウザをリフレッシュしながら開発していくスタイルが一般的になっています。
ライブリロード環境にもたくさんの選択肢がありますが、最も一般的なbrowser-syncをインストールについて紹介します。

Gulpには様々なタスクを実行するためのプラグインが用意されています。
pugにもGulpのプラグインがあるので、それを利用します。

プロジェクトルートに移動して以下インストール用のコマンドを叩きます。
(※プロジェクトルートは前回記事で作成したGitローカルリポジトリを想定)

$ yarn add -D gulp-pug gulp-plumber gulp-filter gulp-html-beautify

上記では、gulp-plumberとgulp-filterさらにgulp-html-beautifyというプラグインも同時にインストールしています。
gulp-plumberは、タスク実行中に文法ミスがあるとGulpが強制停止してしまうのを防ぐプラグインです。
gulp-filterは、ファイル名をフィルタリングして_の接頭辞がついたファイルはHTMLとして出力をしないようにするプラグインです。
pug以外のタスクにも使えるので、同時にインストールしておきましょう
gulp-html-beautifyはhtmlの見た目をキレイにしてくれるプラグインです。

package.jsonを確認し、”devDependencies”に以下のように追記されていればOKです。

{
  "name": "sample-portfolio01",
  "version": "1.0.0",
  "main": "dist/",
  "repository": "https://hq9-sato@github.com/hq9-sato/sample-portfolio01.git",
  "author": "hq9-sato ",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-filter": "^6.0.0",
    "gulp-html-beautify": "^1.0.1",
    "gulp-plumber": "^1.2.1",
    "gulp-pug": "^4.0.1"
  }
}

ファイル構成

プロジェクトルートに移動し、pugのソースファイルを置くディレクトリを作成します。
その中にindex.pugとassets/_head.pugというファイルを設置します。

src/
  pug/
    index.pug
    assets/
      _head.pug

タスクの作成

プロジェクトルートにgulpfile.jsを作成し、タスクを設定します。

const gulp = require('gulp');
const server = require('browser-sync');
const plumber = require('gulp-plumber');
const filter = require('gulp-filter');
const pug = require('gulp-pug');
const beautify = require('gulp-html-beautify');

// ▽ パスの設定
const src = 'src';
const dist = 'dist';
const path = {
  pug: {
    entry: [src+'/pug/**/*.pug']
  }
}

// ▽ pugのコンパイル
function pugCompile() {
  return gulp
    .src(path.pug.entry)
    .pipe(plumber())
    .pipe(pug({pretty: true}))
    .pipe(filter(function(file){return !/\/_/.test(file.path) && !/^_/.test(file.relative);}))
    .pipe(beautify({'indent_size': 2, 'indent_char': ' '}))
    .pipe(gulp.dest(dist));
}

// ▽ サーバーをリロード(browser-sync)
function browserReload(done){
  server.reload();
  done();
}

// ▽ ライブリロードサーバー(browser-sync)
function serverInit(done) {
  server.init({
    server: {baseDir: 'dist'}
  });
  done();
}

// ▽ ファイルを監視
function watchFile(done) {
  gulp.watch(path.pug.entry).on('change', gulp.series(pugCompile, browserReload));
}

// ▽ Gulpにタスクを登録
gulp.task('sync', serverInit);
gulp.task('watch', watchFile);

このように編集してください。
続いてpackage.jsonにyarnの実行コマンドを設定します。

{
  "name": "sample-portfolio01",
  "version": "1.0.0",
  "main": "dist/",
  "repository": "https://hq9-sato@github.com/hq9-sato/sample-portfolio01.git",
  "author": "hq9-sato ",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "gulp sync watch"
  },
   devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-filter": "^6.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-pug": "^4.0.1"
  }
}

scriptsのブロックが追記した部分です。

これでpugのコンパイルができるようになりました!

pugをコンパイルしてみよう!

いよいよpugをコンパイルしてみます。

先程作成した/src/pug/index.pugを編集します。

- var TITLE = "agrius 佐藤農園 pugのコンパイルテスト"

doctype html
html(lang="ja")
  head
    include assets/_head
  body
    p パグが正常にできるかのテストです。
    p 0
    p 上の数字を変更して保存してください。
    p リロードされ、数字が変わればばOKです!

同じく/src/pug/assets/_head.pugを編集します。

title= TITLE

上記のTITLEはindex.pugの定数として定義した内容が代入されます。
ターミナルからタスクを起動します。

$ yarn dev

ブラウザが起動すると思います!

この時点ではまだhtmlが生成されていないので、「Cannot GET /」と表示されます。
index.pugの数字の0を1に修正し保存します。
/dist/ index.htmlが生成されていることを確認してください。

HTMLは以下のように出力されます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <title>agrius 佐藤農園 pugのコンパイルテスト</title>
</head>

<body>
  <p>パグが正常にできるかのテストです。</p>
  <p>1</p>
  <p>上の数字を変更してリロードされればOKです!</p>
</body>

</html>

ここでブラウザに戻り、一度だけ更新します。

パグが正常にできるかのテストです。
1
上の数字を変更してリロードされればOKです!

とブラウザに表示されたはずです。

再度index.pugに戻り、数字の1を2に修正し保存します。

今度は、勝手に画面がリフレッシュされ

パグが正常にできるかのテストです。
2
上の数字を変更してリロードされればOKです!

と表示されましたね。

一度HTMLが生成されて仕舞えば、後はライブでリロードされるようになります。

数字を変えたり、文章を修正して確認してみてください。


おー!なんか大人になれた気がしませんか?

pugいい感じですよね!

pugのリファレンスはpug.orgで確認できます。
この中のLanguage Referenceを一通りやってみると、そのポテンシャルが伝わってくると思います。

ぜひ挑戦してみてくださいね!


田畑を耕しながら田舎でのんびりWEB開発?
若い頃から準備すれば誰にでもできますよ!
今に疲れているクリエイターの方々の少しでも参考になれば嬉しいです。