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

Question

我正在研究反应通量，我已经配置了我的吞噬文件，但是现在我应该动态地通过不同环境的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']);

我如何可以通过不同的网址，不同的环境动态。当我进行gulp构建时，它应该从production.js中获取url并构建包。

Answer 1

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

我我的项目，其中我已经把我的“development.js”和“production.js”（包含相应的URL）下创建配置文件夹。

我已经安装了 “一饮而尽，重命名” 使用NPM安装--save一饮而尽，重命名

我写了下面的代码

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

此代码将取个development.js从config文件夹和重命名它config.js，并将其放置在./src文件夹，这样就可以通过要求其在项目中访问。

在一饮而尽构建的任务，我已经与production.js

我们也可以使用ENV变量来减少冗余的代码取代它。