it-swarm.com.ru

Задача глотка с различным источником в зависимости от аргументов

Я хочу сделать что-то простое, используя глоток. Я хочу написать общий метод для перемещения файлов в выходной каталог из определенного исходного каталога.

делать вид, что у нас что-то вроде 

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 идентичны, за исключением выходного каталога. Я хочу сделать это более DRY (не повторяй себя). Я должен быть в состоянии сделать один метод, который может использовать параметр YARG или что-то правильно? В следующем примере я притворяюсь, что могу передать путь как аргумент

Поэтому я пытаюсь что-то вроде этого, используя Ярги

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 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 завален несколькими ненужными функциями.

Есть ли способ лучше ?

27
jth41

Со второй попытки вы оказались на правильном пути, просто нужно было использовать немного DRY и 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));
25
Dennis Baizulin

Я сделал нечто подобное, используя одну функцию:

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/'
}

Надеюсь, это поможет.

1
MaxRocket

Как насчет чего-то вроде следующего: 

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

Немного опоздал на вечеринку. У меня похожая проблема, я не мог найти простое решение, поэтому я придумала этот подход, чтобы использовать комбинацию npm и gulp.

Скажите, что ваш gulpfile:

var args = require('yargs');

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

И ваш файл npm:

{
  ...
  "scripts": {
    "dev" : "gulp transform-moove-jsx --./output/development/ && gulp one && gulp two",
    "prod" : "gulp transform-moove-jsx --./output/production/  && gulp one && gulp two",
  }
}

Этот подход требует, чтобы вы уже использовали npm в настройках, зависит от системы и работает менее эффективно с возможными побочными эффектами, потому что каждая задача npm запускает файл gulp несколько раз. Но я считаю, что это чище, более логично и снимает кучу ограничений глотка.

0
Xun Yang

Для начала, для записи, соответствующий выпуск github gulp # 1225 .

Gulp не может обрабатывать параметры в задачах. Для обработки сборки dev/production мы можем использовать 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, и оно на самом деле не подходит, если действительно одна и та же задача должна выполняться в одной сборке несколько раз. Это не подходит, потому что это не 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, при этом необходимо указать «связку» метода задачи с новой функцией, которая использует определенную конфигурацию пути. Но это имеет то преимущество, что всякий раз, когда вам нужно внести изменения в метод задачи, он находится в одном месте. Также вы можете легко увидеть, какая часть сайта использует какие методы.

Это также, как я решаю эту проблему в моем проекте gulpfile .

0
Wtower