[英]grunt-preprocess and grunt-env mystery
I'm banging my head on this one; 我正在敲这个头。
I want to alter my html file based on development-environment or production. 我想根据开发环境或生产情况更改HTML文件。 I followed a topic here on Stackoverflow but somehow the preprocess-context arguments are always the last one in the files. 我在这里关注了Stackoverflow上的一个主题,但是以某种方式,预处理上下文参数始终是文件中的最后一个。 Okay I'll include some snippets. 好的,我将提供一些摘要。
Piece of Grunt.js 一块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'
}
},
Source 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>
This is the output of index.html that gets rendered by preprocess:dev; 这是由preprocess:dev呈现的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>
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. 如您所见,@if NODE_ENV =='DEVELOPMENT'被忽略,但是来自preprocess:dev的上下文参数被传递给@if NODE_ENV =='PRODUCTION',这对我真的没有意义。 Do you have a clue?! 你有线索吗?
Okay guys i'm using Grunt-processhtml. 好的,我正在使用Grunt-processhtml。 It does exactly what I had in mind. 它完全符合我的想法。 you can set variables in a context. 您可以在上下文中设置变量。 Remove blocks of html, set url's or metatags innerHTML based on envirenment really nice. 删除html块,根据环境设置url或metatagsinnerHTML确实不错。 Only downside, maybe there is a setting for it, it leaves html-comment-markup for processing the html-code. 唯一的缺点是,也许有一个设置,它留下了html-comment-markup来处理html代码。
I don't know if it matters but I use single '=' just like per example at: grunt-preprocess on npm 我不知道这是否重要,但是我像在以下示例中那样使用单个“ =”: npm上的grunt-preprocess
<!-- @if NODE_ENV='production' -->
<script src="some/production/lib/like/analytics.js"></script>
<!-- @endif -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.