5

在 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'
    }
},
4

2 回答 2

2

您可能应该使用 gulp-preprocess 并在 gulp 中执行此类操作

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 -->
于 2014-11-07T17:33:44.460 回答
1

这就是我如何完成我认为你想要的。我已经设置了一个文件夹，其中包含要预处理的 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 知道要重新加载哪个页面。

我在移动设备上写了这篇文章，所以我可能会回来编辑以澄清问题，但解决这个谜题为我节省了大量的时间和精力。

于 2014-06-06T18:41:43.460 回答