Gulp Env和预处理 [英] Gulp Env and Preprocess
问题描述
在Grunt中,我曾经使用名为 env 的插件.这将允许我在特定的构建中定义环境.我有3个版本.一个是DEV,它将使用分别拆分的所有文件. PROD将合并所有内容,而RELEASE将合并并丑化.我希望在Gulp中也做同样的事情.我确实看到了Gulp的预处理器,但没有定义环境.
In Grunt I used to use a plugin called env. 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.
问题是.我能做些什么?显然,我不想一直定义所有的JS文件,也不想3个带有不同脚本标签的HTML页面.
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.
在我的HTML中,我会有类似的内容:
In my HTML I would have something like this:
<!-- @if NODE_ENV == 'DEVELOPMENT' -->
<script src="js/example1.js" type="text/javascript"></script>
<script src="js/example2.js" type="text/javascript"></script>
<script src="js/example3.js" type="text/javascript"></script>
<!-- @endif -->
<!-- @if NODE_ENV == 'PRODUCTION' -->
<script src="js/project.js" type="text/javascript"></script>
<!-- @endif -->
<!-- @if NODE_ENV == 'RELEASE' -->
<script src="js/project.min.js" type="text/javascript"></script>
<!-- @endif -->
我的咕unt插件看起来像这样:
And my grunt plugins would look like this:
env: {
dev: {
NODE_ENV: 'DEVELOPMENT'
},
prod: {
NODE_ENV: 'PRODUCTION'
},
release: {
NODE_ENV: 'RELEASE'
}
},
preprocess: {
options: {
context: {
name: '<%= pkg.outputName %>',
version: '<%= pkg.version %>',
port: '<%= pkg.port %>'
}
},
dev: {
src: 'index.html',
dest: '<%= pkg.outputFolder %>/index.html'
},
prod: {
src: 'index.html',
dest: '<%= pkg.outputFolder %>/index.html'
},
release: {
src: 'index.html',
dest: '<%= pkg.outputFolder %>/index.html'
}
},
推荐答案
您应该使用gulp-preprocess并在gulp中做类似的事情
You should probably use gulp-preprocess and do stuff like this in gulp
var preprocess = require('gulp-preprocess');
.pipe(preprocess({context: { NODE_ENV: 'PRODUCTION', RELEASE_TAG: '2.6.4', DEBUG: false}}))
在您的html中包含类似的内容
with stuff like this in your html
<!-- @if NODE_ENV='DEVELOPMENT' -->
<a href="test?v<!-- @echo RELEASE_TAG -->" />
<!-- @endif -->
这篇关于Gulp Env和预处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!