Question

在我的Grunt构建过程中，我想在index.html中设置脚本标记，该标记基于process.env.NODE_ENV动态引用Google Maps API。类似的东西：

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>

Answer 1

您可以使用许多选项。从简单的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。

希望它有所帮助。

有关插件的更多信息，请访问here。

通过基于ENV的Grunt动态设置脚本标记

1 个答案: