32

gulp を使用して簡単なことを達成したい。特定のソース ディレクトリから出力ディレクトリにファイルを移動するための一般的な方法を作成したいと考えています。

私たちはそのようなものを持っているふりをします

var args = require('yargs');
function transform-move-jsx-Development() 
{
  gulp.src(config.sourceJSX)
  .pipe(react, browserify, etc....)
  .pipe(gulp.dest(config.output_development));
};

function transform-move-jsx-Production() 
{
  gulp.src(config.sourceJSX)
  .pipe(react, browserify, etc....)
  .pipe(gulp.dest(config.output_production));
};

gulp.task('transform-move-jsx-Development', transform-move-jsx-Development);
gulp.task('transform-move-jsx-Production', transform-move-jsx-Production);

gulp.task('prod', [transform-move-jsx-Production]);
gulp.task('dev', ['transform-move-jsx-Development']);

transform-move-jsx-Production と transform-move-jsx-Development の 2 つのタスクは、出力ディレクトリを除いて同じです。もっとDRY（Don't Repeat Yourself）にしたい。yarg パラメーターまたは何かを使用できる単一のメソッドを作成できるはずです。この次の例では、パスを引数として渡すことができるふりをします

だから私はyargsを使ってこのようなことを試します

var args = require('yargs');

function transform-move-jsx() 
{ 
    return gulp.src(config.sourceJSX)
    .pipe(gulp.dest(args.outputDirectory));
};

gulp.task('dev', ['transform-move-jsx']);

ただし、これにより、コマンドラインでgulp呼び出しに引数を追加する必要があります

gulp dev --"path to output, etc."

dev gulp タスク内からますます多くの gulp タスクを呼び出すため、これは明らかに保守性が低くなります。実行時の出力ディレクトリ構造のような実装の詳細を知る必要がないため、とにかく面倒ですgulp dev

代わりに、次のようなことができます。

function transform-move-jsx(destination) 
{ 
    return gulp.src(config.sourceJSX)
    .pipe(gulp.dest(destination));
};

function transform-move-jsx-Development() 
{
    transform-move-jsx("./output/development/");
};

function transform-move-jsx-Production() 
{
    transform-move-jsx("./output/production/");
};

gulp.task('transform-move-jsx-Development',transform-move-jsx-Development);
gulp.task('transform-move-jsx-Production', transform-move-jsx-Production);

gulp.task('prod',  transform-move-jsx-Production);
gulp.task('dev',  transform-move-jsx-Development);

これはより柔軟であるという点で優れているように見えますが、現在、私の gulpfile にはいくつかの不要な関数が散らばっています。

より良い方法はありますか？

4

7 に答える 7

1

単一の関数を使用して同様のことを行いました：

function getDest(folder){
    var folder = folder || '';
    var newDest;
    if (args.build){
        newDest = config.build.home + folder;
    }
    if (args.temp){
        newDest = config.temp.home + folder;
    }
    return newDest;
}

次に、gulp.dest() を呼び出すと、次のようになります。

.pipe(gulp.dest(getDest())) // defaults to ./ directory

または、サブフォルダーが必要な場合:

.pipe(gulp.dest(getDest(config.css)))

私の設定ファイルには単にパスがありました。

config = {
   css: '/css/',
   home: './',
   js: '/js/'
}

それが役立つことを願っています。

于 2016-01-21T16:15:35.260 に答える
0

まず、記録のために、関連する github issue gulp#1225 .

Gulp は、タスクのパラメーターを処理できません。開発/本番ビルドを処理するために、yargsとgulp -ifを使用できます:

var gulp = require('gulp');
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var production = argv.production;

次に、たとえば CSS タスクで次のようにします。

return gulp.src(paths.css)
  .pipe(gulpif(!production, sourcemaps.init()))
  .on('error', handleError('CSS'))
  .pipe(concat('style.min.css'))
  .pipe(gulpif(production, autoprefixer(config.autoprefixer_versions)))
  .pipe(gulpif(production, minifyCSS()))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest(paths.build + 'css/'));

ご覧のとおり、gulp-if を使用するとパイプが適切に処理されます。

しかし、上記は依然として gulp を実行する必要がgulp mytask --productionあり、実際に同じタスクを 1 つのビルドで複数回実行する必要がある場合には適していません。全然DRYじゃないから不向き。

たとえば、さまざまなサイト パーツ用に多数の CSS ビルドを生成する必要がある場合、上記のタスクを n 回繰り返す必要があります。しかし、gulp はパラメーターを処理できないため、次のようにする必要があります。

var taskMethods = {
  css: function (paths) {
    return gulp.src(paths.css)
      .pipe(gulpif(!production, sourcemaps.init()))
      .on('error', handleError('CSS'))
      .pipe(concat('style.min.css'))
      .pipe(gulpif(production, autoprefixer(config.autoprefixer_versions)))
      .pipe(gulpif(production, minifyCSS()))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(paths.build + 'css/'));
  }
};

var pathsIndex = {
  css: [...],
  build: '...'
};

var tasksIndex = {
  css: function() { return taskMethods(pathsIndex); }
}

var pathsAdmin = {...};
var tasksAdmin = {...};

gulp.task('cssIndex', tasksIndex.css);
gulp.task('cssAdmin', tasksAdmin.css);

そのため、基本的にタスク メソッドを gulp タスクから分離しますが、特定のパス構成を使用する新しい関数へのタスク メソッドの「ワイヤアップ」を指定する必要があるというコストがかかります。しかし、これには、タスク メソッドを変更する必要があるときはいつでも 1 か所で済むという利点があります。また、サイトのどの部分がどのメソッドを使用しているかを簡単に確認できます。

これは、 gulpfile プロジェクトでこの問題に対処する方法でもあります。

于 2017-01-03T22:15:42.373 に答える
0

次のようなものはどうでしょう。 

var args = require('yargs');
function transform-move-jsx(destination) {
    return function(){
        return gulp.src(config.sourceJSX)
                   .pipe(react, browserify, etc....)
                   .pipe(gulp.dest(destination));
    }
};

gulp.task('transform-move-jsx-Development', transform-move-jsx(config.output_development));
gulp.task('transform-move-jsx-Production', transform-move-jsx(config.output_production));

gulp.task('prod', [transform-move-jsx-Production]);
gulp.task('dev', ['transform-move-jsx-Development']);
于 2017-02-07T12:06:29.290 に答える