Gulp Env and Preprocess

问题

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.

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.

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

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

回答1:

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

with stuff like this in your html

<!-- @if NODE_ENV='DEVELOPMENT' -->
   <a href="test?v<!-- @echo RELEASE_TAG -->" />
<!-- @endif -->

回答2:

Here is how I accomplished what I think you want. I have set up a folder that contains html pages to be preprocessed.

Within that folder I have folders corresponding to each page where I store html fragments and a json file.

Each JSON file has variables defining page assets for a specific page.

For example, say my page is index.html. It looks something like this:

<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

In my JSON file for that page I either have pagecss1 define or not.

Then I use gulp.watch.

I don't want to write out the whole thing, but the upshot is every time any of the files in the sub folders change a function intercepts the already existing global context variable, and reads the JSON file for that page. Then I use node.util._extend to overwrite the variables with page specific variables. I then pass the changed object to the preprocessor task as the context. It's all lightening quick and returns a callback that livereload know which page to reload.

I wrote this on mobile, so I may come back to edit for clarity, but solving this riddle saved me an incredible amount of time and effort.

来源：https://stackoverflow.com/questions/23119501/gulp-env-and-preprocess

标签

node.js

gruntjs

preprocessor

gulp

env