Che*_*vas 5 preprocessor env node.js gruntjs gulp
在Grunt中,我曾经使用过一个名为env的插件.这将允许我在特定构建中定义环境.我有3个版本.一个是DEV,它将使用单独拆分的所有文件.PROD将连接所有内容,RELEASE将连接和uglify.我想在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 -->
我的咕噜插件看起来像这样:
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'
}
},
这就是我如何完成我认为你想要的事情。我已经设置了一个包含要预处理的 html 页面的文件夹。
在该文件夹中，我有与每个页面对应的文件夹，在其中存储 html 片段和 json 文件。
每个 JSON 文件都有定义特定页面的页面资产的变量。
例如，假设我的页面是index.html。它看起来像这样：
<html>
<head>
... Meta stuff title etc ...
<!-- @ifdef pagecss1 -->
<link href="<!-- @echo pagecss1 -->" rel="stylesheet">
<!-- @endif -->
<!-- @ifdef pagecss2 -->
<link href="<!-- @echo pagecss2 -->" rel="stylesheet">
<!-- @endif -->
</head>
/// so on - same stuff with scripts at bottom
在该页面的 JSON 文件中，我要么pagecss1定义了，要么没有定义。
然后我使用 gulp.watch。
我不想写出整个内容，但结果是每次子文件夹中的任何文件更改时，函数都会拦截已经存在的全局上下文变量，并读取该页面的 JSON 文件。然后我用node.util._extend页面特定变量覆盖变量。然后，我将更改后的对象作为上下文传递给预处理器任务。一切都快如闪电，并返回一个回调，livereload 知道要重新加载哪个页面。
我是在手机上写的，所以为了清楚起见，我可能会回来编辑，但解决这个谜题为我节省了大量的时间和精力。
| 归档时间： |
|
| 查看次数： |
5376 次 |
| 最近记录： |