吞食环境和预处理
在Grunt中，我曾经使用一个名为env的插件。 这将允许我在特定的构build中定义一个环境。 我有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 --> 我的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' } },
你可能应该使用gulp-preprocess来做这样的事情
var preprocess = require('gulp-preprocess'); .pipe(preprocess({context: { NODE_ENV: 'PRODUCTION', RELEASE_TAG: '2.6.4', DEBUG: false}}))
与这样的东西在你的HTML
<!-- @if NODE_ENV='DEVELOPMENT' --> <a href="test?v<!-- @echo RELEASE_TAG -->" /> <!-- @endif -->
这是我如何完成我想要的。 我已经build立了一个包含要被预处理的html页面的文件夹。
在该文件夹中，我有相应的每个页面，我存储HTML片段和JSON文件的文件夹。
每个JSON文件都有为特定页面定义页面资源的variables。
例如，说我的网页是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。
我不想写出所有的东西，但是结果是每次子文件夹中的任何文件都改变一个函数来拦截已经存在的全局上下文variables，并读取该页面的JSON文件。 然后我使用node.util._extend用页面特定的variables来覆盖variables。 然后，我将更改的对象作为上下文传递给预处理器任务。 这一切都很快，并返回一个callback，livereload知道哪个页面重新加载。
我在手机上写了这个，所以我可能会回来编辑清楚，但解决这个谜语节省了我不可思议的时间和精力。