dciccale / grunt-processhtml

Process html files at build time to modify them depending on the release environment
MIT License
407 stars 30 forks source link

How to use environment values inside the template #92

Closed rkmax closed 8 years ago

rkmax commented 8 years ago

Example I have the following in my index.html

<!-- build:template    
    <% if (environment === 'production') { %>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', '<%= GOOGLE_TRACKING_ID %>', 'auto');
      ga('send', 'pageview');
    </script>
    <% } %>
    /build -->
dciccale commented 8 years ago

you have to pass the data of the template from your Gruntfile.

here is a quick draft

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    processhtml: {
      template: {
        options: {
          data: {
            googleTrackingId: process.env.GOOGLE_TRACKING_ID
          }
        },
        files: [{
          'dist/template.html': ['template.html']
        }]
      },
    }
  });

  grunt.registerTask('default', ['processhtml']);
};

template.html

<!-- build:template    
    <% if (environment === 'production') { %>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', '<%= googleTrackingId %>', 'auto');
      ga('send', 'pageview');
    </script>
    <% } %>
    /build -->
rkmax commented 8 years ago

Thank you @dciccale