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

然后你可以为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'));
});

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

1 个答案: