自己紹介

• 山田 典明 | @noliaki
• 札幌生まれ札幌育ち 👶
• 2006年 - 2013年 東京 🇯🇵
• 2013年 - 2015年 ホーチミン 🇻🇳
• 2015年 - 2016年 東京 🇯🇵
• 2016年 - 現在      札幌 🇯🇵
• ❤️ Vue

https://jp.vuejs.org/contribution/

(私の) 開発環境

• HTML
  Pug → HTML

• CSS
  stylus + autoprefixer → CSS

• JS
  TypeScript → JS

• 画像
  imageminで最適化

(私の) 開発環境

• webサーバー
  browser-sync

(私の) 開発環境

後は これらをどう走らせるか

• grunt ?

• gulp ?

(私の) 開発環境

• HTML
  Pug → HTML

• CSS
  stylus + autoprefixer → CSS

• JS
  TypeScript → JS

• 画像
  imageminで最適化

なぜ、gulpとかCLIとか
使わなかったのか 🤔

header.pug

header

header.pug

header

今見てるページと

それを構成するリソースだけあれば

良いんじゃね🤔？

(私の) 開発環境

• HTML
  Pug → HTML

• CSS
  stylus + autoprefixer → CSS

• JS
  TypeScript → JS

• 画像
  imageminで最適化

browser-sync

data.json

Pug files

1. リクエストのパスを受け取る
2. そのパスに対応するデータを取得
3. そのパスに対応するPugテンプレートを読み込む
4. HTMLへコンパイル
5. HTMLを返却

const middleware = async (req, res, next) => {
  const requestPath = url.parse(req.url).pathname
  const filePath = path.join(docRoot, requestPath.replace(/\.html$/, '.pug'))

  if (!fs.pathExistsSync(filePath) || !(/\.html$/.test(requestPath))) {
    next()
    return
  }

  const html = await compile(filePath)

  res.writeHead(200, {'Content-Type': 'text/html'})
  res.end(html)
}

const compile = filename => {
  const option = Object.assign(defaultOption, {
    filePath: path.relative(docRoot, filename)
  })

  return new Promise((resolve, reject) => {
    pug.renderFile(filename, option, (error, html) => {
      if (error) {
        reject(error)
        throw error
      }

      console.log('-----------------------------------')
      console.log(`////// ${filename} //////`)
      console.log(HTMLHint.verify(html))
      console.log('-----------------------------------')
      resolve(html)
    })
  })
}

CSSも同じことしてる

変更検知もしたいよね

(私の) 開発環境

• HTML
  Pug → HTML

• CSS
  stylus + autoprefixer → CSS

• JS
  TypeScript → JS

• 画像
  imageminで最適化

画像に追加・変更があれば

imageminで圧縮

それ以外のファイルは

単純にコピーする

まとめ

• 開発環境はbrowser-syncの立ち上げとfs.watchするだけになった
• htmlのビルドは最小限になるので、待ち時間とか無くなった

これらも使っていきたい

余談

/path/to/request/hoge.html

browser-sync

data.json

Pug files

1. リクエストのパスを受け取る
2. そのパスに対応するデータを取得
3. そのパスに対応するPugテンプレートを読み込む
4. HTMLへコンパイル
5. HTMLを返却

• 300ページ超えのページ情報を作るのは大変だし、絶対ミスる

• これらはクライアントに作成してもらった

• もちろんJSONファイル作ってくれって言っても、絶対知らない（13日の金曜日の方は分かる）

• なので、みんな大好きExcelで作ってもらった

• excel2json ってモジュールあるけど、クライアントは絶対 例外と独自項目作ってくることは予知していたので使わなかった。

• 地道にやった