javascript - mac - Gulp tarea con diferente fuente dependiendo de argumentos

nodemon windows 10

Question

Quiero lograr algo simple usando gulp. Quiero escribir un método genérico para mover archivos a un directorio de salida desde un directorio de origen particular.

fingir que tenemos algo así

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

Las dos tareas: transform-move-jsx-Production y transform-move-jsx-Development son idénticas excepto en el directorio de salida. Quiero hacerlo más SECO (No se repita). Debería poder hacer un solo método que pueda usar un parámetro yarg o algo, ¿no? En este siguiente ejemplo, pretendo que puedo pasar el camino como un arg

Así que intento algo como esto usando 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'']);

Sin embargo, esto ahora requiere que agregue argumentos a la llamada trillada en la línea de comandos

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

Eso es obviamente menos mantenible ya que llamamos a más y más tareas engullidas desde el interior de la tarea dev gulp. Y, de todos modos, sería complicado ya que no deberíamos saber un detalle de implementación como la estructura del directorio de salida cuando ejecutamos gulp dev

En su lugar podría hacer algo como esto:

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

Esto parece mejor, ya que es más flexible, sin embargo, ahora mi gulpfile está lleno de varias funciones innecesarias.

¿Hay alguna manera mejor?

Answer 1

¿Qué tal algo como lo siguiente?

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

Answer 2

Estuvo en el camino correcto en su segundo intento, solo necesitaba utilizar un poco de DRY y 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 3

Hice algo similar usando una sola función:

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

Entonces, cuando llamo a gulp.dest ():

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

O si quisiera una subcarpeta:

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

Mi archivo de configuración simplemente tenía rutas, es decir:

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

Espero que ayude.

Answer 4

No estoy seguro si esto es de alguna utilidad, pero solo mis pocos peniques en una idea:

Tener lo siguiente en un archivo trago.

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

Esto permite, entonces, realizar tareas sencillas de manera sencilla, como gulp dev o gulp prod .

Sin config.js espera un archivo config.js similar al siguiente:

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

Probablemente hay maneras más ordenadas de hacerlo con yargs, pero si solo quieres una gulp + task limpia y trillada, es una dirección que tomaría.

Answer 5

Para comenzar, para el registro, el problema de github relevante gulp#1225 .

Gulp no puede manejar parámetros en tareas. Para manejar la compilación de desarrollo / producción, podemos usar yargs y gulp-if :

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

Luego, por ejemplo, en una tarea 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/''));

Como puede ver, el uso de gulp-if maneja la tubería correctamente.

Sin embargo, lo anterior aún debe ejecutarse con trago con gulp mytask --production , y no es adecuado en realidad si, de hecho, la misma tarea debe ejecutarse en una compilación varias veces. No es adecuado porque no es SECO en absoluto.

Por ejemplo, si necesita producir varias compilaciones de CSS para diferentes partes del sitio, tendría que repetir la tarea anterior n veces. Pero como Gulp no puede manejar parámetros, necesitamos hacer algo como:

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

Básicamente, separamos el método de la tarea de la tarea truculenta, con el costo de tener que especificar un ''cableado'' del método de la tarea a una nueva función que utiliza una configuración de ruta determinada. Pero esto tiene la ventaja de que siempre que necesite realizar un cambio en un método de tarea, está en un solo lugar. También puede ver fácilmente qué parte del sitio utiliza qué métodos.

Así es como trato este problema en mi proyecto gulpfile .

Answer 6

Un poco tarde para la fiesta. Tengo un problema similar, no pude encontrar una solución simple, así que se me ocurre este método para usar una combinación de npm y trago.

Digamos que su gulpfile es:

var args = require(''yargs'');

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

Y tu archivo npm:

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

Este enfoque requiere que ya esté utilizando npm en su configuración, depende del sistema y se ejecuta con menos eficacia con posibles efectos secundarios, ya que cada tarea npm ejecuta el archivo trucado varias veces. Pero lo considero más limpio, más lógico y elimina un montón de limitaciones de trago.