Как настроить статическую 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/' 
    } 
}; 

Тогда вы могли бы создать отдельные задачи для 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')); 
});