gulpを使用してurlを反応フラックスプロジェクトに動的に渡す方法は？

Question

私は反応フラックスに取り組んでいます。私はgulpファイルを設定しましたが、今は異なる環境のURLを動的に渡すべきです（開発、生産など）。私はそれぞれのenvのURLのリストを持っている2つのjsファイル（development.js、production.js）を持っています。以下は私の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」を使用して達成することができました。以下は私がこれを解決するために従った手順です。

私は私が私の "development.js" と "production.js"（それぞれのURLが含まれているのを）置いてきたここで、私のプロジェクトの下でconfigフォルダを作成しました。私がインストールした

--save

を一気リネームNPMをインストールし、私は以下のコード

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

を書いて使用して "をがぶ飲み、名前の変更"

このコードではdevelopment.js configフォルダからとそれへconfig.jsのの名前を変更し、あなたがプロジェクトでそれを必要とすることによって、それをアクセスできるように、./srcフォルダに配置します。

は一気のビルドタスクでは、私はproduction.js

我々はまた、コードの冗長性を減らすためにENV変数を使用することができて、それを交換しました。