※（2016/10/6修正）npmモジュールの情報が不足していたので修正しました。またjadeをpugに、gulpの設定もbabelを使うように変更しました。

↓こちらのサイトを参考にしました。

参考

静的な多言語Webサイトを1ソースから作る方法 - deepblue-will’s diary

ポイント

HTMLは1つのJADEファイルで管理
各言語は言語ごとにJSONファイルで管理

ながれ

JSONファイルの設定
JADEファイルの設定
必要なnpmモジュールファイルなどをインストール
gulpファイルの設定

フォルダ構成

.babelrc
gulpfile.babel.js

src
├── gulpfile.js
│ 
├── json
│　　├── sample_ja.json
│　　└── sample_en.json
│  
└── pug
　　　└── sample.pug
　　　
public
├── 日本語HTML出力先
│ 
└── en
　　　└── 英語HTML出力先

1.JSONファイルの設定：（日/英）

（日本語） sample_ja.json

{
  "title": "タイトル",
  "content": {
    "name1": "名前1",
    "name2": "名前2",
    "profile1": "プロフィール1",
    "profile2": "プロフィール2"
  }
}

（英語） sample_en.json

{
  "title": "TITLE",
  "content": {
    "name1": "name1",
    "name2": "name2",
    "profile1": "profile1",
    "profile2": "profile2"
  }
}

2.PUGファイルの設定

JSONで定義した変数名を#{}で囲ってpugにかきます。

（sample.pug）

doctype html

html
  head
    title #{title}
  body
    dl
      dt #{content.name1}
      dd #{content.profile1}

      dt #{content.name2}
      dd #{content.profile2}

      dt #{content.name2}
      dd #{content.profile2}

3.必要なnpmモジュールファイルをインストール

この記事の内容を実行するのに最低限必要なnpmモジュールをインストールします。

babel-preset-es2015
babel-register
browser-sync
git://github.com/gulpjs/gulp.git#4.0
gulp-pug
gulp-watch
read-config

npm i babel-preset-es2015 babel-register browser-sync git://github.com/gulpjs/gulp.git#4.0 gulp-pug gulp-watch read-config --save-dev

es2015へ変換するためにpresetの指定が必要なので、ルートに.babelrcを作って下記のように指定します。

（.babelrc）

{
  "presets": ["es2015"]
}

4.gulpファイルの設定

（gulpfile.babel.js）

'use strict';

import gulp from 'gulp';
import browserSync from 'browser-sync';
import watch from 'gulp-watch';
import readConfig from 'read-config';
import pug from 'gulp-pug';

const SRC = './src';
const DEST = './public';

//pugTask
const pugTask = (lang) => {
  //出力先フォルダを設定
  let destDir = DEST+'/'+lang;
  if(lang === 'ja') destDir =  DEST+'/';

  // //JSON指定
  let locals = readConfig(`${SRC}/json/sample_`+lang+`.json`);
  return gulp.src([`${SRC}/pug/**/*.pug`])
    .pipe(pug({
        locals: locals,
        pretty: true
    }))
    .pipe(gulp.dest(`${destDir}`));
}

//日本語タスク
gulp.task('pug:ja', () => {
  return pugTask('ja');
});

//英語タスク
gulp.task('pug:en', () => {
  return pugTask('en');
});

//日・英両タスクを1つのタスクにまとめる
gulp.task('html', gulp.series('pug:ja', 'pug:en'));

//serve
gulp.task('browser-sync', () => {
    browserSync({
        server: {
            baseDir: DEST
        }
    });
    watch([
        `${SRC}/pug/**/*.pug`,
        `${SRC}/json/**/*.json`
    ], gulp.series('html', browserSync.reload));
});

//実行
gulp.task('serve', gulp.series('browser-sync'));
gulp.task('build', gulp.parallel('html'));
gulp.task('default', gulp.series('build', 'serve'));

あとはgulpを実行したら完了です。

あと

トップページでは「top_ja.json」と「top_en.json」を読み、アバウトページでは「about_ja.json」と「about_en.json」を読む。っといった感じでページごとにJSONファイルを分けたい場合はgulpの設定を下記のように変更します。

↓この部分

let locals = readConfig(`${SRC}/json/sample_`+lang+`.json`);

↓をこのようにします

//JSON指定
let locals = {
    'top': readConfig(`${SRC}/json/top_`+lang+`.json`),
    'about': readConfig(`${SRC}/json/about_`+lang+`.json`)
  }

JADE(PUG)で呼び出すときは、トップページなら#{top.title}や#{top.content.name1}、アバウトページなら#{about.title}や#{about.content.name1}、のようにします。

#{top.content.name1}は長いので変数に入れた方が扱いやすいですね。

（例）

- var TITLE = top.title
- var CONTENT = top.content
 
doctype html

html
  head
    title #{TITLE}
  body
    dl
      dt #{CONTENT.name1}
      dd #{CONTENT.profile1}

      dt #{CONTENT.name2}
      dd #{CONTENT.profile2}

      dt #{CONTENT.name2}
      dd #{CONTENT.profile2}

つまづいたところ

改行の<br>の表示でつまずきました。 ”ごにょごにょ<br>ごにょごにょ”の<br>が

ごにょごにょ
ごにょごにょ

にならずに

ごにょごにょ<br>ごにょごにょ

になったのです。 JADE(PUG)で呼び出すときに#{変数}としてたところを!{変数}にしたら解決しました。

もっく日記

書いておぼえるためのブログ

１つのjadeから他言語ファイルをgulpビルドする方法

参考