Zadanie Gulp z innym źródłem w zależności od argumentów.

Question

Chcę osiągnąć coś prostego za pomocą łyka. Chcę napisać ogólną metodę przenoszenia plików do katalogu wyjściowego z określonego katalogu źródłowego.

udawać, mamy coś jak Więc

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

dwóch zadań: transform-move-JSX-produkcji i transformacji-move-JSX-rozwojowych są identyczne, z wyjątkiem katalogu wyjściowego. Chcę, aby było bardziej SUCHEGO (nie powtarzaj się). Powinienem być w stanie zrobić jedną metodę, która może użyć parametru yarg lub coś w tym stylu? W tym kolejnym przykładzie udaję mogę przejść ścieżkę jako arg

Więc spróbuj coś takiego korzystających 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']); 

Jednak to wymaga teraz mi dodać argumenty do rozmowy haustem w wierszu poleceń

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

Jest to oczywiście mniej konserwowalne, ponieważ nazywamy coraz więcej zadań od wewnątrz zadania Dev Gulp. I byłby jakikolwiek bałagan jak nie powinniśmy znać szczegółów wdrażania podobnego co struktura katalogów jest wyjście, gdy prowadzimy gulp dev

mogłem zamiast zrobić coś takiego:

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

Wydaje lepiej że jest bardziej elastyczny, ale teraz mój plik gulp jest zaśmiecony kilkoma niepotrzebnymi funkcjami.

Czy istnieje lepszy sposób?

Answer 1

Byłaś na dobrej drodze z drugiej próbie, po prostu potrzebne do korzystania trochę DRY i 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

Zrobiłem coś podobnego przy użyciu pojedynczej funkcji:

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

Wtedy, kiedy ja wywołać gulp.dest():

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

Albo gdybym chciał podfolder:

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

Mój plik konfiguracyjny miał po prostu ścieżki, tj .:

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

Nadzieję, że pomaga.

Answer 3

Nie jestem pewien, czy jest to każde użycie, ale tylko kilka pensów na mój pomysł: -

mieć następujące w pliku haustem.

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

Pozwala to następnie w swoich prostych zadań, takich jak gulp dev łykiem lub gulp prod.

on oczekuje config.js plik podobny do poniżej choć:

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

prawdopodobnie istnieją neater sposoby to zrobić z yargs, ale jeśli chcesz tylko czysty gulp + task to jest to kierunek zabrałbym.

Answer 4

Na początek, dla rekordu, odpowiedni numer github gulp#1225.

Gulp nie obsługuje parametrów w zadaniach. W celu obsługi build dev/produkcja, możemy użyć yargs i gulp-if:

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

Następnie, na przykład, w zadaniu 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/')); 

Jak widać, użycie gulp- jeśli prawidłowo obsługuje rurę.

Ale powyższy problem nadal musi działać z gulp mytask --production i nie jest odpowiedni, jeśli rzeczywiście to samo zadanie musi być uruchamiane w jednym kompilacji wiele razy. Nie nadaje się, ponieważ w ogóle nie jest SUCHEGO.

Na przykład, jeśli potrzebujesz wytworzyć wiele kompilacji CSS dla różnych części serwisu, powinieneś powtórzyć powyższe zadanie n razy. Ale ponieważ łyk nie może obsługiwać parametry, musimy zrobić coś takiego:

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

Więc zasadniczo oddzielić metodę zadaniową od zadania haustem, z kosztem konieczności określenie „drut up” metody zadaniowej do nowej funkcji, która używa określonej konfiguracji ścieżki. Ale ma to tę zaletę, że za każdym razem, gdy trzeba dokonać zmiany w metodzie zadania, jest ona w jednym miejscu. Możesz także łatwo sprawdzić, która część witryny korzysta z wybranych metod.

W ten sposób radzę sobie z tym problemem w moim gulpfile project.

Answer 5

Jak o czymś takim, co następuje:

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