Come posso utilizzare gulp per concatenare i componenti bower che contengono risorse?

Question

Sto sviluppando un'applicazione di esempio che utilizza bower per la sua gestione delle dipendenze e gulp per il suo sistema di generazione.

Ho utilizzato il plug-in main-bower-files per copiare tutti i file rilevanti dalla directory bower_components in una directory build/dist/bower_components.

Tutto questo funziona perfettamente e posso aprire l'applicazione index.html che punta correttamente a ciascuno di questi file e puntano correttamente alle risorse.

Il mio prossimo passo è concatenare lo bower_components in modo da avere un singolo CSS e un singolo file JS insieme a tutte le risorse (caratteri, immagini, ecc.). Ho usato gulp-useref per raggruppare tutti i componenti, e sembra funzionare bene.

Tuttavia, alcuni dei file CSS e JS essere combinati percorsi relativi uso per fare riferimento a beni che sono ora errata, poiché tutto è in un unico file:

• FontAwesome
• Bootstrap
• e un costume componente del bower che stiamo creando

Esiste una soluzione standard per il fissaggio delle risorse?

Devo utilizzare gulp per aggiornare i riferimenti alle risorse o forse utilizzare un altro plug-in?

Answer 1

Utilizzando gulp-replace plugin è possibile concatenare gli attributi di bower_components.

Ad esempio:

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

gulp.task('fix-paths', ['minify'], function() { 
    gulp.src('public/css/site.css') 
     .pipe(replace('../', '../bower_components/bootstrap/dist/')) 
     .pipe(gulp.dest('public/css')); 
}); 

Answer 2

Sto usando il plugin sorso iniettare per iniettare il file concatenato al codice HTML. Qualcosa del genere -

gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() { 
    gulp.src('./*.html') 
     .pipe(inject(gulp.src(['./dist/js/**/*.js']) 
      .pipe(angularFilesort()), { 
       'ignorePath': 'dist/js', 
       'addRootSlash': false, 
       'addPrefix': 'scripts' 
      })) 
     .pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], { 
      read: false 
     }), { 
      'name': 'vendors', 
      'ignorePath': 'dist/vendors', 
      'addRootSlash': false, 
      'addPrefix': 'vendors' 
     })) 
     .pipe(inject(gulp.src(['./dist/css/*.css'], { 
      read: false 
     }), { 
      'ignorePath': 'dist/css', 
      'addRootSlash': false, 
      'addPrefix': 'styles' 
     })) 
     .pipe(gulp.dest('dist')); 
}); 

Fammi sapere se hai bisogno di altro codice.

Answer 3

Recentemente ho trovato lo stesso problema così passato attraverso varie soluzioni e uno di loro era quello di sostituire il contenuto di CSS in questa risposta stessa. Dopo aver guardato il font-awesome.css è stato chiaro che si riferisce al percorso relativo per raggiungere la cartella dei caratteri. lo stesso è avvenuto con il bootstrap css. La soluzione è semplice ora assicurati sempre di mantenere la cartella css e fonts allo stesso livello e copia i dati. Includere anche i file minimi specifici dell'app qui. posto unico per tutti i file dist rende la vita facile

Answer 4

Per CSS, vi suggerirei di usare gulp-rework, che avvolge rework che ha un numero di plugin molto utile.

Uno di questi è url, che fornisce una funzione per l'aggiornamento degli URL contenuti nei CSS.

Un esempio in cui questo è utile, è in CSS che non contiene alcun percorso da sostituire; per esempio.

url (backgroundimage2.png)

Oppure, si desidera eseguire diverse modifiche dell'URL in base al tipo (ad esempio solo immagini, non caratteri Web).

È possibile creare una funzione che verifica il tipo di risorsa; l'esempio seguente elabora solo i file di immagini:

// CSS 
    .pipe(cssFilter) 
    .pipe(rework(reworkUrl(function (url) { 
     // modifications on url, e.g. using http://medialize.github.io/URI.js/ 
     if (url.match(/[^/]+(jpg|jpeg|png|gif)$/)) 
     { 
      return '/lib/img/' + url.replace('../', ''); 
     } 
     else 
     { 
      return url; 
     } 

    })))