在 Grunt 中,我曾经使用一个名为env的插件。这将允许我在特定构建中定义一个环境。我有 3 个版本。一个是 DEV,它将使用单独拆分的所有文件。PROD 将连接所有内容,而 RELEASE 将连接和丑化。我希望在 Gulp 中做同样的事情。我确实看到了 Gulp 的预处理器,但没有定义环境。
问题是。我能做些什么?显然我不想一直定义所有的 JS 文件,也不想要 3 个具有不同脚本标签的不同 HTML 页面。
在我的 HTML 中,我会有这样的内容:
<!-- @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 -->
我的 grunt 插件看起来像这样:
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'
}
},