2019年7月10日

gulpで複数通りの置換をおこない、別名で保存する

ひとつのHTMLに任意の置換タグを仕込み、2通りの置換を実行した結果をそれぞれ別のHTMLに保存する。

プロジェクトフォルダを準備

たとえば、「gulp-replace-test」というフォルダを任意の場所に作って移動。

cd フォルダをドラッグ&ドロップ

フォルダを以下のように構成し、

gulp-replace-test
└── src
    └── html

デフォルトのpackage.jsonを作成。

npm init -y

必要なモジュールをインストール。

npm i -D gulp gulp-replace gulp-rename merge-stream

サンプルHTMLを準備

サンプルのHTMLを作成して「html」内に保存。下記「{{ MESSGE }}」が置換箇所にあたる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sample</title>
</head>
<body>
  <p>{{ MESSAGE }}</p>
</body>
</html>

gulpファイルを準備して実行

プロジェクトフォルダ直下に「gulpfile.js」を作成。

// モジュールを読み込む
const gulp = require('gulp');
const replace = require('gulp-replace');
const rename = require('gulp-rename');
const merge = require('merge-stream');


// パスを設定する
const paths = {
  'src': {
    'html': './src/html/'
  },
  'dist': {
    'html': './dist/html/'
  }
}


// 複数通りの置換をおこない、別名で保存するタスク
function replace_and_save(){

  // その1:置換してそのまま保存
  const case1 = gulp.src(paths.src.html + 'sample.html')
  .pipe(replace(/{{ MESSAGE }}/g, 'This is CASE1.'))
  .pipe(gulp.dest(paths.dist.html));

  // その2:置換して別名で保存
  const case2 = gulp.src(paths.src.html + 'sample.html')
  .pipe(replace(/{{ MESSAGE }}/g, 'This is CASE2.'))
  .pipe(rename('sample-another.html'))
  .pipe(gulp.dest(paths.dist.html));

  // その1とその2をまとめて実行
  return merge(case1, case2);

}


// 「dev」という名前でタスクを実行する
exports.dev = replace_and_save;

実行。

npx gulp dev

distフォルダに「sample.html」と「sample-another.html」が保存され、置換タグがそれぞれ別の内容に置換されていれば成功。