tutorial - npm gulp

Gulp src ignora parte de la ruta global para una copia recursiva

Question

Me gustaría copiar algunos archivos de recursos openui5 en mi carpeta de salida desde los paquetes de bower. Todos tienen un prefijo común (openui5-). Todos tienen una subcarpeta llamada "recursos". Me gustaría copiar ese contenido de esa subcarpeta a una carpeta común de "recursos" en mi salida.

Me gustaría usar un glob para copiarlos con trago. Por ahora tengo que dar explícitamente cada camino

[''bower_components/openui5-sap.m/resources/**/*'',
 ''bower_components/openui5-sap.ui.core/resources/**/*'',
 ''bower_components/openui5-themelib_sap_belize/resources/**/*'']

Me gustaría usar un patrón como este:

''bower_components/openui5-*/resources/**/*''

Pero si hago esto, también copio el nombre completo del módulo, así que mi carpeta de recursos se ve así:

out/resources/
+ -- openui5-sap.m/resources/...
+ -- openui5-sap.ui.core/resources/...
+ -- openui5-themelib_sap_belize/resources/...

Como llegué a entender esto es porque por defecto gulp.src toma el primer glob (que está en el nombre del módulo) y hace la estructura recursiva desde allí.

¿Hay alguna forma de ignorar partes del patrón glob para la salida o recortar las rutas de salida usando otro glob?

Jugué y busqué soluciones, pero no puedo encontrar nada.

gulp-rename parece aplanar toda la jerarquía:

gulp.task(''copyui5resources'', function() {
    gulp.src(''bower_components/openui5-*/**/*'')
        .pipe(rename({ dirname: '''' }))
        .pipe(gulp.dest(''out/resources''));
});

Y usar la opción base tampoco ayuda. Parece copiar solo una parte de esto:

gulp.task(''copyui5resources'', function() {
    gulp.src(''bower_components/openui5-*/**/*'', {base: ''bower_components/openui5-*''})
        .pipe(gulp.dest(''out/resources''));
});

Aquí hay una captura de pantalla con mi estructura de carpetas de entrada y mi tarea de gulp hasta ahora. ¡Gracias por tu ayuda!

Answer 1

Estás en el camino correcto intentando usar gulp-rename . Sin embargo, la opción dirname no es lo suficientemente potente para lo que está intentando lograr, ya que solo puede reemplazar toda la estructura de directorios. Quieres reemplazar solo una parte de eso.

Para casos como estos, gulp-rename puede ser provisto con una función que le permite alterar el nombre del dirname utilizando todo lo que JavaScript tiene para ofrecer, incluyendo string.replace() .

Eso significa que puedes hacer esto:

var gulp = require(''gulp'');
var rename = require(''gulp-rename'');

gulp.task(''default'', function() {
  return gulp.src(''bower_components/openui5-*/resources/**/*'')
    .pipe(rename(f => f.dirname = f.dirname.replace(/openui5-.*?///, '''')))
    .pipe(gulp.dest(''out/''));
});

Answer 2

Gracias por tu ayuda Sven,

Acabo de tropezar con esa sugerencia esta mañana en otra publicación antes de leer tu publicación :( Quité las dos primeras partes del camino y obtuve el resultado deseado. Tiene la ventaja de que puedes saltarte tantas partes como quieras y la expresión regular la solución tiene la ventaja de atrapar incluso partes de camino más similares.

Para completar: esta es la solución que se me ocurrió:

var gulp = require(''gulp''),
    rename = require(''gulp-rename''),
    path = require(''path'');

gulp.task(''copyui5resources'', function() {
    gulp.src(''bower_components/openui5-*/resources/**/*'')
        .pipe(rename(function(p) {
            var nda = p.dirname.split(/[////]/);
            nda.splice(0, 2); 
            p.dirname = nda.length > 0 ? path.join.apply(null, nda) : "";
        }))
        .pipe(gulp.dest(''out/resources''));
});

Utilicé la ruta para volver a unir las rutas independientes del sistema operativo. Splice elimina las dos primeras partes con el nombre del paquete y el directorio de recursos. Debe usar path.join.apply, ya que aplana la matriz, de lo contrario, obtendrá un error.