title: Gulp Env and Preprocess
body: <p>In Grunt I used to use a plugin called <strong><a href="https://github.com/jsoverson/grunt-env" rel="noreferrer">env</a></strong>. That would allow me to define an environment in specific build. I had 3 builds. One was DEV which would use all the files split up individually. PROD would concat everything and RELEASE would concat and uglify. I'm looking to do the same in Gulp. I do see a preprocessor for Gulp but nothing to define environment.</p>
  
  <p>The question is. What can I do? Obviously I don't want to define all JS files all the time, and I don't want 3 different HTML pages with different script tags.</p>
  
  <p>In my HTML I would have something like this:</p>
  
  <pre><code>&lt;!-- @if NODE_ENV == 'DEVELOPMENT' --&gt;
  &lt;script src="js/example1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/example2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/example3.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- @endif --&gt;
  
  &lt;!-- @if NODE_ENV == 'PRODUCTION' --&gt;
  &lt;script src="js/project.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- @endif --&gt;
  
  &lt;!-- @if NODE_ENV == 'RELEASE' --&gt;
  &lt;script src="js/project.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- @endif --&gt;
  </code></pre>
  
  <p>And my grunt plugins would look like this:</p>
  
  <pre><code>env: {
      dev: {
          NODE_ENV: 'DEVELOPMENT'
      },
      prod: {
          NODE_ENV: 'PRODUCTION'
      },
      release: {
          NODE_ENV: 'RELEASE'
      }
  },
  preprocess: {
      options: {
          context: {
              name: '&lt;%= pkg.outputName %&gt;',
              version: '&lt;%= pkg.version %&gt;',
              port: '&lt;%= pkg.port %&gt;'
          }
      },
      dev: {
          src: 'index.html',
          dest: '&lt;%= pkg.outputFolder %&gt;/index.html'
      },
      prod: {
          src: 'index.html',
          dest: '&lt;%= pkg.outputFolder %&gt;/index.html'
      },
      release: {
          src: 'index.html',
          dest: '&lt;%= pkg.outputFolder %&gt;/index.html'
      }
  },
  </code></pre>