Динамически устанавливать тег скрипта через Grunt на основе ENV - PullRequest
Новая
       65

Динамически устанавливать тег скрипта через Grunt на основе ENV

0 голосов
/ 06 июня 2018

Во время процесса сборки Grunt я хотел бы установить тег скрипта в моем index.html, который динамически ссылается на API Карт Google на основе process.env.NODE_ENV.Что-то вроде: 

let googleMapsUrl;

if (process.env.NODE_ENV === 'development') {
  googleMapsUrl = '//maps.googleaps.com/maps/api/js?v=3.exp&libraries=visualization';
} else {
  googleMapsUrl = `//maps.googleaps.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}v=3.exp&libraries=visualization`;
}

Мой вопрос: как мне вставить googleMapsUrl в тег сценария в index.html, например, так: <script src=googleMapsUrl></script>

1 Ответ

0 голосов
/ 07 июня 2018

Есть много вариантов, которые вы можете использовать.От простых, таких как grunt-replace до более продвинутых, таких как grunt-processhtml.Я опишу первый, так как это хороший вариант для простых задач и требует простой конфигурации.

Использование grunt-replace

grunt-replace будет искать простойопределения переменных, такие как @@foo в исходных файлах, и замените эти переменные на предоставленное вами значение или возвращаемое значение из обратного вызова.

Сначала установите плагин, используя npm install grunt-replace --save-dev

Затем настройтеЗадача выглядит следующим образом: 

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: 'gmaps',
          replacement: function() {
            var googleMapsUrl;
            if(process.env.NODE_ENV === 'development') {
              googleMapsUrl = '//maps.googleaps.com/maps/api/js?v=3.exp&libraries=visualization';
            } else {
              googleMapsUrl = '//maps.googleaps.com/maps/api/js?key=' + process.env.GOOGLE_MAPS_API_KEY + 'v=3.exp&libraries=visualization';
            }
            return googleMapsUrl;
          }
        }
      ]
    },
    files: [
      {
        expand: true,
        flatten: true,
        src: ['path/to/your/source/file.html'], dest: 'destination/folder/'
      }
    ]
  }
}

Загрузите плагин, используя grunt.loadNpmTasks('grunt-replace'), а затем добавьте его в процесс сборки.

В исходных файлах просто добавьте определенную переменную в качестве источника сценария: 

<script src="@@gmaps"></script>

Задача заменит @@gmaps на возвращаемое значение из заданного обратного вызова.

Надеюсь, это поможет.

Подробнее о плагине можно узнать здесь.

...