title: grunt-preprocess and grunt-env mystery
body: <p>I'm banging my head on this one;</p>
  
  <p>I want to alter my html file based on development-environment or production. I followed a topic here on Stackoverflow but somehow the preprocess-context arguments are always the last one in the files. Okay I'll include some snippets.</p>
  
  <p><strong>Piece of Grunt.js</strong></p>
  
  <pre><code>    //Grunt task to automate environment configuration for future tasks.
      env : {
          //USER : 'raymond',
          //PATH : '/bin:/usr/bin',
  
          options : {
              /* Shared Options Hash */
              //globalOption : 'foo'
          },
          dev: {
              NODE_ENV : 'DEVELOPMENT'
          },
          prod : {
              NODE_ENV : 'PRODUCTION'
          }
      },
      //Grunt task around preprocess npm module.
      preprocess : {
          options: {
              context : {
                  DEBUG       : true,
                  now         : '&lt;%= grunt.template.today() %&gt;',//@TODO .toISOString()
                  ver         : '&lt;%= pkg.version %&gt;'
              }
          },
          dev : {
              options : {
                  context : {
                      url         : 'http://www.&lt;%= pkg.name %&gt;&lt;%= pkg.tld.dev %&gt;',
                      concat      : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.dev %&gt;.concat.js',
                      uglify      : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.dev %&gt;.concat.min.js',
                      css         : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.dev %&gt;.css',
                      cssMin      : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.dev %&gt;.min.css'
                  }
              },
              src : 'index.html',
              dest : 'dist/dev/index.html'
              // @TODO write to dist/dev-directory fails cause probably permissions checked it;
              // I have to 777 on www-data to run Nginx properly. Strange cause raymond is part of group www-data
  
          },
          prod : {
              options : {
                  context : {
                      url         : 'http://www.&lt;%= pkg.name %&gt;&lt;%= pkg.tld.prod %&gt;',
                      concat      : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.prod %&gt;.concat.js',
                      uglify      : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.prod %&gt;.concat.min.js',
                      css         : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.prod %&gt;.css',
                      cssMin      : '&lt;%= pkg.name %&gt;&lt;%= pkg.tld.prod %&gt;.min.css'
                  }
              },
              src : '&lt;%= preprocess.dev.src %&gt;',
              dest : 'dist/prod/index.html'
          }
      },
  </code></pre>
  
  <p><strong>Source index.html</strong></p>
  
  <pre><code>    &lt;!-- @if NODE_ENV == 'DEVELOPMENT' --&gt;
      &lt;script type="text/javascript" src="/js/vendor/jquery-2.1.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/vendor/jquery.hammer-1.0.6.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js//vendor/snap.svg-0.2.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/vendor/helper.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/plugins.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/myradon.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/myradon-snap.js"&gt;&lt;/script&gt;
      &lt;!--
      &lt;script src="&lt;!-- @echo url --&gt;/js/&lt;!-- @echo concat --&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;!-- @echo url --&gt;/js/&lt;!-- @echo uglify --&gt;"&gt;&lt;/script&gt;
      --&gt;
      &lt;!-- @endif --&gt;
      &lt;!-- @if NODE_ENV == 'PRODUCTION' --&gt;
      &lt;!-- &lt;script src="&lt;!-- @echo url --&gt;/js/&lt;!-- @echo concat --&gt;"&gt;&lt;/script&gt; --&gt;
      &lt;script src="&lt;!-- @echo url --&gt;/js/&lt;!-- @echo uglify --&gt;"&gt;&lt;/script&gt;
      &lt;script&gt;
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-5427260-3']); //www.myradon.net = UA-5427260-2, www.myradon.nl = UA-5427260-3, www2.myradon.net = UA-5427260-4
          _gaq.push(['_trackPageview']);
          (function () {
              var ga = document.createElement('script');
              ga.type = 'text/javascript';
              ga.async = true;
              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
              var s = document.getElementsByTagName('script')[0];
              s.parentNode.insertBefore(ga, s);
          })();
      &lt;/script&gt;
      &lt;!-- @endif --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>This is the output of index.html that gets rendered by preprocess:dev;</strong></p>
  
  <pre><code>    &lt;!-- &lt;script src="http://www.myradon.net/js/myradon.net.concat.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="http://www.myradon.net/js/myradon.net.concat.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-5427260-3']); //www.myradon.net = UA-5427260-2, www.myradon.nl = UA-5427260-3, www2.myradon.net = UA-5427260-4
          _gaq.push(['_trackPageview']);
          (function () {
              var ga = document.createElement('script');
              ga.type = 'text/javascript';
              ga.async = true;
              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
              var s = document.getElementsByTagName('script')[0];
              s.parentNode.insertBefore(ga, s);
          })();
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>As you can see @if NODE_ENV == 'DEVELOPMENT' is ignored but the context arguments from preprocess:dev are passed to @if NODE_ENV == 'PRODUCTION' This really makes no sence to me. Do you have a clue?!</p>