tutorial - install gulp




Gulp src ignora la parte del percorso globale per la copia ricorsiva (2)

Grazie per il tuo aiuto Sven,

Questa mattina mi sono imbattuto in questo suggerimento in un altro post prima di leggere il tuo post :( Ho rimosso le prime due parti del percorso e ottenuto il risultato desiderato. Ha il vantaggio che puoi saltare quante parti vuoi e la regex la soluzione ha il vantaggio di catturare parti di percorso ancora più simili.

Per il completamento: ecco la soluzione che ho trovato:

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

Ho usato il percorso per ricongiungermi ai percorsi indipendenti dal sistema operativo. Splice rimuove le prime due parti con il nome del pacchetto e la directory delle risorse. Devi usare path.join.apply, poiché appiattisce l'array, altrimenti ottieni un errore.

Vorrei copiare alcuni file di risorse openui5 nella mia cartella di output dai pacchetti di bower. Hanno tutti un prefisso comune (openui5-). Hanno tutti una sottocartella chiamata "risorse". Vorrei copiare quel contenuto da quella sottocartella in una cartella "risorse" comune nel mio output.

Mi piacerebbe usare un glob per copiarli con un sorso. Per ora devo dare esplicitamente ogni percorso

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

Mi piacerebbe usare un modello come questo:

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

Ma se lo faccio, ottengo anche il nome completo del modulo copiato, quindi la mia cartella delle risorse ha il seguente aspetto:

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

Come ho capito, questo è dovuto al fatto che per default gulp.src prende il primo glob (che è nel nome del modulo) e crea la struttura ricorsiva da lì.

C'è un modo per ignorare parti del pattern glob per l'output o tagliare i percorsi di output usando un altro glob?

Ho giocato intorno e cercato qualsiasi soluzione, ma non riesco a trovare nulla.

gulp-rename sembra appiattire l'intera gerarchia:

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

E l'uso dell'opzione base non aiuta neanche. Sembra copiare solo una parte di esso:

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

Ecco uno screenshot con la mia struttura di cartelle di input e il mio compito di gulp finora. Grazie per l'aiuto!


Sei sulla strada giusta cercando di usare gulp-rename . Tuttavia l'opzione dirname non è abbastanza potente per ciò che stai cercando di realizzare, dal momento che può solo sostituire l'intera struttura di directory. Vuoi sostituire solo una parte di esso.

Per casi come questi, gulp-rename può essere fornito con una funzione, che ti permette di modificare dirname usando tutto ciò che JavaScript ha da offrire, incluso string.replace() .

Ciò significa che puoi fare questo:

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