Gulp Aufgabe mit unterschiedlicher Quelle in Abhängigkeit von Argumenten

Question

Ich möchte etwas einfaches mit Schluck zu erreichen. Ich möchte eine generische Methode schreiben, um Dateien von einem bestimmten Quellverzeichnis in ein Ausgabeverzeichnis zu verschieben.

so tun wir so etwas wie so

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']); 

Die beiden Aufgaben: Transformation-move-jsx-Produktion und Transformation-move-jsx-Entwicklung mit Ausnahme des Ausgabeverzeichnis identisch sind. Ich möchte es trockener machen (wiederhole dich nicht). Ich sollte in der Lage sein, eine einzige Methode zu machen, die einen Yarg-Parameter oder etwas richtig verwenden kann? Im nächsten Beispiel so tun, als ich, dass ich den Weg als arg

var args = require('yargs'); 

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

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

aber jetzt dies erfordert mich

Also versuche ich, so etwas wie dies mit yargs passieren kann Argumente an den schluck Aufruf in der Befehlszeile hinzufügen

Das ist offensichtlich weniger wartbar, da wir mehr und mehr Schluckaufgaben innerhalb der Dev-Schluckaufgabe nennen. Und würde sowieso chaotisch sein, wie wir sollten nicht eine Implementierung Detail wie müssen wissen, was die Ausgangsverzeichnisstruktur ist, wenn wir gulp dev

laufen konnte ich stattdessen so etwas tun:

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

Dies scheint besser in dass es flexibler ist, aber jetzt ist mein gulpfile mit mehreren unnötigen Funktionen übersät.

Gibt es einen besseren Weg?

Answer 1

Sie waren auf dem richtigen Weg mit dem zweiten Versuch, brauchte nur ein bisschen DRY und closures

function createTransformTaskClosure (destination) { 
    return function() { 
     return gulp.src(config.sourceJSX) 
        .pipe(gulp.dest(destination)); 
    }; 
} 

gulp.task('dev', createTransformTaskClosure(config.output_development)); 
gulp.task('prod', createTransformTaskClosure(config.output_production)); 

Answer 2

Ich habe etwas ähnliches eine einzige Funktion:

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

Dann, wenn ich die gulp.dest nennen würde():

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

Oder wenn ich einen Unterordner wollte:

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

Meine Konfigurationsdatei hatte einfach Wege, das heißt:

Hoffnung, das hilft.

Answer 3

nicht sicher, ob dies eine Verwendung ist, aber nur meine paar Groschen auf eine Idee: -

haben die folgenden in einem Zug-Datei.

var args = require('yargs'), 
    config = require('./config.js'), 
    run = require('gulp-sequence'); 

gulp.task('transform-move-jsx-all', function() { 
    return gulp.src(config.sourceJSX) 
     .pipe(react, browserify, etc....) 
     .pipe(gulp.dest(config.current.output)); 
}; 

gulp.task('prod', function(done) { 
    config.current = config.prod; 
    run('transform-move-jsx' /* and any additional sequential tasks here*/)(done); 
}); 

gulp.task('dev', function(done) { 
    config.current = config.dev; 
    run('transform-move-jsx' /* and any additional sequential tasks here*/)(done); 
}); 

Dies ermöglicht dann Ihre einfache Aufgaben in schluck wie gulp dev oder gulp prod.

Es erwartet eine config.js Datei ähnlich wie unten aber:

var config = { 
    current : { 
     // Will set when running each task 
    }, 
    /* Keep dev and prod adhering to the same structure/model so that they are interchangable */ 
    dev : { 
     output : 'dev_output', 
    }, 
    prod : { 
     output : 'prod_output' 
    }, 
    sourceJSX : [ 'file1.jsx' ], 
    etc... 
} 

Es gibt wahrscheinlich sauberere Möglichkeiten, es mit yargs zu tun, aber wenn man nur ein sauberes gulp + task wollen dann ist es eine Richtung, die ich nehmen würde.

Answer 4

Zunächst, für die Aufzeichnung, die relevanten Github Problem gulp#1225.

Gulp kann Parameter in Tasks nicht verarbeiten.

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

Dann zum Beispiel in einer CSS-Aufgabe: Um dev/Produktion bauen zu handhaben, können wir yargs und gulp-if verwenden

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/')); 

Wie Sie sehen können, ist die Verwendung von gulp- wenn das Rohr richtig gehandhabt wird.

Aber die oben genannten müssen noch Schluck mit gulp mytask --production laufen, und ist nicht wirklich geeignet, wenn in der Tat die gleiche Aufgabe in einem Build mehrmals ausgeführt werden muss. Es ist nicht geeignet, weil es überhaupt nicht trocken ist.

Wenn Sie beispielsweise mehrere CSS-Builds für verschiedene Website-Teile erstellen müssen, müssen Sie die obige Aufgabe n-mal wiederholen. Da aber schluck Parameter nicht umgehen kann, müssen wir etwas tun, wie:

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

So im Wesentlichen wir die Aufgabe Methode aus dem Zuge Aufgabe trennen, mit den Kosten für ein ‚Draht-up‘ der Task-Methode angeben zu müssen zu einer neuen Funktion, die eine bestimmte Pfadkonfiguration verwendet. Dies hat jedoch den Vorteil, dass Sie Änderungen an einer Aufgabenmethode an einer Stelle vornehmen müssen. Außerdem können Sie leicht sehen, welcher Teil der Site welche Methoden verwendet.

Dies ist auch, wie ich mit diesem Problem in meinem gulpfile project umgehen.

Answer 5

zu nutzen Wie wäre es so etwas wie die folgenden:

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']);