如何使用 gulp 将 url 动态传递给 react-flux 项目？

Question

我正在研究 react-flux，我已经配置了我的 gulp 文件，但是现在我应该动态地传递不同环境的 url（如开发、生产等）。我有两个 js 文件（development.js、production.js），其中包含各个 env 的 url 列表。下面是我的 gulp 文件，我尝试过使用 yargs，但没有成功。

"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); 
var open = require('gulp-open'); 
var browserify = require('browserify');
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 
var concat = require('gulp-concat');
var lint = require('gulp-eslint'); 
var uglify = require('gulp-uglify');
var cssmin = require('gulp-cssmin');
var imagemin = require('gulp-imagemin');
var pump = require('pump');
var wait = require('gulp-wait');
var buffer = require('vinyl-buffer');
var Rename = require('rename');
var argv = require('yargs');


var config = {
    port: 3000,
    environment : !!argv.env ? argv.env : process.env.NODE_ENV || 'production',
    devUrl: 'http://localhost',
    paths: {
        html: './src/*.html',
        js: './src/scripts/**/*.js',
        css: [
            'node_modules/bootstrap/dist/css/bootstrap.css',
            'node_modules/bootstrap/dist/css/bootstrap-theme.css',
            'src/css/*.css'
        ],
        dist: './dist',
        tmp: './build',
        dep: './dep',
        images: './src/images/*.*',
        mainJs: './src/scripts/main.js',
        configFolder : './config',
        urlFile : './src/scripts'
    }
};

gulp.task('config', function() {
    return gulp.src(config.paths.configFolder + '/' + config.environment + '.js')
        .pipe(Rename('config.js'))
        .pipe(gulp.dest(config.paths.urlFile));
});

//Start a local development server
gulp.task('connect', function () {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devUrl,
        livereload: true
    });
});

gulp.task('open', ['connect'], function () {
    gulp.src('dist/index.html')
        .pipe(open({uri: config.devUrl + ':' + config.port + '/'}));
});

gulp.task('html', function () {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});

gulp.task('images', function () {
    gulp.src(config.paths.images)
        .pipe(gulp.dest(config.paths.dist + '/images'))
        .pipe(connect.reload());
});

gulp.task('js', function () {
    browserify(config.paths.mainJs,{debug:true})
        .transform(babelify, {presets: ['es2015', 'react']})
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))

        .pipe(gulp.dest(config.paths.dist + '/scripts'))
        .pipe(connect.reload());
});

gulp.task('css', function () {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'))
        .pipe(connect.reload());
});

gulp.task('lint', function () {
    return gulp.src(config.paths.js)
        .pipe(lint({config: 'eslint.config.json'}))
        .pipe(lint.format());
});

gulp.task('watch', function () {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.images, ['images']);
    gulp.watch(config.paths.css, ['css']);
});

gulp.task('build', ['config','lint','html','css','images'],function () {

    browserify(config.paths.mainJs)
        .transform(babelify, {presets: ['es2015', 'react']})
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest(config.paths.dep + '/scripts'));

    gulp.src(config.paths.dist + '/*.html')
        .pipe(gulp.dest(config.paths.dep));

    gulp.src(config.paths.dist + '/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest(config.paths.dep + '/css'));

    gulp.src(config.paths.dist + '/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest(config.paths.dep + '/images'));

});

gulp.task('default', ['config', 'html', 'js', 'css', 'images', 'lint', 'open', 'watch']);

如何为不同的环境动态传递不同的 url。当我进行 gulp 构建时，它应该从 production.js 获取 url 并构建包。

Answer 1

最后我可以使用“gulp-rename”来实现它。以下是我为解决此问题所遵循的步骤。

我在我的项目下创建了 config 文件夹，其中放置了我的“development.js”和“production.js "（包含相应的网址）。

我使用 npm install --save gulp-rename 安装了“gulp-rename” /p>

我写了下面的代码

gulp.src(config.paths.configFolder + "/development.js")
        .pipe(Rename("config.js"))
        .pipe(gulp.dest("./src"));

此代码将从配置文件夹中获取 development.js 并将其重命名 为 config.js 并将其放置在 ./src 文件夹中，以便您可以通过在项目中需要它来访问它。

在 gulp 构建任务中，我已将其替换为 production.js

我们还可以使用环境变量来减少代码中的冗余。