Gulp 环境和预处理 [英] 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 页面有不同的 script 标签.

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 -->

我的 grunt 插件看起来像这样:

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 环境和预处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！