html - さまざまな環境用に静的 HTML ページを構成するにはどうすればよいですか?

Question

私は、HTML テンプレートと gulp に Nunjucks を使用してページをコンパイルしています。これは静的な 1 ページのサイトですが、環境ごとに分析などに異なる値を設定する必要があることがわかりました。これを行う最善の方法は何ですか？

config json ファイルを用意し、環境ごとに異なる gulp タスクを記述して値を変更することを考えていましたが、これを行うためのより良い方法があるかどうかを確認したいと思います。

Answer 1

Nunjucks を使用しているため、ifステートメント ブロックを指定できます。変数を使用してアセット パスを指定することもできます。

{% if env == "dev" %}
  <div>dev code</div>
  <img src="{{img_path}}placeholder.png" />
{% else %}
  <div>prod code</div>
  <img src="{{img_path}}placeholder.png" />
{% endif %}

環境の構成ファイルを作成できます。

// file: config.js
module.exports = {
  'dev': {
    env: 'dev',
    img_path: '/path/to/dev/img/'
  },
  'prod': {
    env: 'prod',
    img_path: '/path/to/prod/img/'
  }
};

次に、dev と prod に個別のタスクを作成できます。

const nunjucks = require('gulp-nunjucks');
var Config = require('config');

gulp.task('dev', function() {
  return gulp.src('index.html')
    .pipe(nunjucks.compile(Config.envs.dev))
    .pipe(gulp.dest('dist'));
});

gulp.task('prod', function() {
  return gulp.src('index.html')
    .pipe(nunjucks.compile(Config.envs.prod))
    .pipe(gulp.dest('dist'));
});