html - 如何为不同的环境配置静态 HTML 页面？

Question

我正在使用 Nunjucks 进行 HTML 模板和 gulp 来编译页面。它只是一个静态的单页网站，但现在我发现我需要为每个环境设置不同的分析值等。最好的方法是什么？

我正在考虑拥有一个配置 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'));
});