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

Question

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

我正在考虑拥有一个配置 json 文件并为每个环境编写不同的 gulp 任务来更改值，但我想看看是否有更好的方法来执行此操作。

Answer 1

由于您使用的是 Nunjucks，您可以指定 if statement blocks。您还可以使用变量指定资产路径。

{% 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/'
  }
};

然后您可以为开发和生产创建单独的任务。

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'));
});

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

How do I configure a static HTML page for different environments?

html

gulp

nunjucks