grunt-preprocess와 grunt-env mystery

Question

나는이 하나에 내 머리를 두드리는거야;

개발 환경 또는 제작 환경을 기반으로 HTML 파일을 변경하고 싶습니다. 나는 Stackoverflow에 대한 주제를 따라 갔지만 어떻게 든 전처리 - 컨텍스트 인수는 항상 파일의 마지막 것입니다. 좋아요. 일부 발췌 문장을 포함시켜 드리겠습니다. Grunt.js의

조각

//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   : '<%= grunt.template.today() %>',//@TODO .toISOString() 
       ver   : '<%= pkg.version %>' 
      } 
     }, 
     dev : { 
      options : { 
       context : { 
        url   : 'http://www.<%= pkg.name %><%= pkg.tld.dev %>', 
        concat  : '<%= pkg.name %><%= pkg.tld.dev %>.concat.js', 
        uglify  : '<%= pkg.name %><%= pkg.tld.dev %>.concat.min.js', 
        css   : '<%= pkg.name %><%= pkg.tld.dev %>.css', 
        cssMin  : '<%= pkg.name %><%= pkg.tld.dev %>.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.<%= pkg.name %><%= pkg.tld.prod %>', 
        concat  : '<%= pkg.name %><%= pkg.tld.prod %>.concat.js', 
        uglify  : '<%= pkg.name %><%= pkg.tld.prod %>.concat.min.js', 
        css   : '<%= pkg.name %><%= pkg.tld.prod %>.css', 
        cssMin  : '<%= pkg.name %><%= pkg.tld.prod %>.min.css' 
       } 
      }, 
      src : '<%= preprocess.dev.src %>', 
      dest : 'dist/prod/index.html' 
     } 
    }, 

이 전처리에 의해 렌더링 된 index.html 도착의 출력

<!-- @if NODE_ENV == 'DEVELOPMENT' --> 
    <script type="text/javascript" src="/js/vendor/jquery-2.1.0.js"></script> 
    <script type="text/javascript" src="/js/vendor/jquery.hammer-1.0.6.js"></script> 
    <script type="text/javascript" src="/js//vendor/snap.svg-0.2.0.js"></script> 
    <script type="text/javascript" src="/js/vendor/helper.js"></script> 
    <script type="text/javascript" src="/js/plugins.js"></script> 
    <script type="text/javascript" src="/js/myradon.js"></script> 
    <script type="text/javascript" src="/js/myradon-snap.js"></script> 
    <!-- 
    <script src="<!-- @echo url -->/js/<!-- @echo concat -->"></script> 
    <script src="<!-- @echo url -->/js/<!-- @echo uglify -->"></script> 
    --> 
    <!-- @endif --> 
    <!-- @if NODE_ENV == 'PRODUCTION' --> 
    <!-- <script src="<!-- @echo url -->/js/<!-- @echo concat -->"></script> --> 
    <script src="<!-- @echo url -->/js/<!-- @echo uglify -->"></script> 
    <script> 
     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); 
     })(); 
    </script> 
    <!-- @endif --> 
</body> 

소스 index.html을 : 디바이스가;

<!-- <script src="http://www.myradon.net/js/myradon.net.concat.js"></script> --> 
    <script src="http://www.myradon.net/js/myradon.net.concat.min.js"></script> 
    <script> 
     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); 
     })(); 
    </script> 
</body> 

당신이 NODE_ENV == '개발'@if 볼 수 있듯이 무시되지만 전처리에서 상황에 맞는 인수 : DEV는 정말 나에게 어떤 sence도하지 않습니다이 NODE_ENV == '생산'을 @if에 전달됩니다. 당신은 단서가 있습니까?!

Answer 1

나는 Grunt-processhtml을 사용하고 있습니다. 그것은 내가 염두에 두었던 것을 정확하게합니다. 컨텍스트에서 변수를 설정할 수 있습니다. HTML 블록을 제거하고 envirenment를 기반으로 url 또는 metatags innerHTML을 설정합니다. 단지 단점, 어쩌면 거기에 대한 설정이 있습니다, 그것은 html 코드를 처리하기위한 html-comment-markup을 남깁니다.

Answer 2

가 중요하지만 난에 단지 예 당처럼 '='단일 사용하는 경우 나도 몰라 : 나는 당신의`NODE_ENV` 환경 변수의 값을 확인했다 있으리라 믿고있어 grunt-preprocess on npm

<!-- @if NODE_ENV='production' --> 
<script src="some/production/lib/like/analytics.js"></script> 
<!-- @endif -->