Che cos'è un flusso di lavoro front-end pulito con bower e gulp?

Question

Ho davvero faticato a capire come installare e aggiornare in modo pulito le risorse lato client da fornitori di terze parti. Tutto ciò che voglio veramente fare è recuperare le versioni attuali e copiare i file pronti per la produzione in una posizione fissa. Il migliore che ho potuto venire in mente finora è questa cosa brutta:

gulp.task('bower', ['clean','load'], function(){ 
    var bowerFilesToMove = [ 
     'angular*/*', 
     'bootstrap/dist/*', 
     'fontawesome/*', 
     'jasny-bootstrap/dist/*', 
     'jcrop/css/*', 
     'jcrop/js/*', 
     'jquery/dist/*', 
     'jquery-align-column/*', 
     'jquery-autosize/*', 
     'jqueryui/ui/minified/*', 
     'moment/min/*', 
     'select2/*', 
     'underscore/*', 
    ]; 

    bowerFilesToMove.forEach(function(filespec){ 
     gulp.src('./bower_components/'+filespec+'.css') 
      .pipe(flatten()) 
      .pipe(gulp.dest('public/vendor/css')); 
    }); 

    bowerFilesToMove.forEach(function(filespec){ 
     gulp.src('./bower_components/'+filespec+'.js') 
      .pipe(flatten()) 
      .pipe(gulp.dest('public/vendor/js')); 
    }); 

    bowerFilesToMove.forEach(function(filespec){ 
     gulp.src('./bower_components/'+filespec+'.map') 
      .pipe(flatten()) 
      .pipe(gulp.dest('public/vendor/js')); 
    }); 

    gulp.src('./bower_components/jqueryui/themes/*') 
     .pipe(gulp.dest('public/vendor/css/themes')); 

    gulp.src('./bower_components/bootstrap/dist/fonts/*') 
     .pipe(gulp.dest('public/vendor/fonts')); 

    gulp.src('./bower_components/fontawesome/fonts/*') 
     .pipe(gulp.dest('public/vendor/fonts')); 
}); 

gulp.task('clean', function(){ 
    return gulp.src('./public/vendor') 
     .pipe(clean({force: true})); 
}); 

gulp.task('load', function(){ 
    return bower(); 
}); 

Ho letto un sacco di cercare di capire le migliori pratiche e gli strumenti per le implementazioni dei clienti, ma hanno appena stato sempre me stesso sempre più confuso. Sono certo che il front-end sarà più complesso della semplice selezione di pacchetti e di "aggiornamento del compositore", ma questo sembra piuttosto azzardato. Quali sono alcuni modi migliori per gestirlo?

Answer 1

Ogni volta che sto lavorando a un'app a livello di produzione, anziché gestire manualmente la copia di risorse specifiche del fornitore in una directory, consento al mio processo di build di dare un'occhiata ai miei file di markup rilevanti che fanno riferimento a qualsiasi tag <script> e accertare ciò che deve essere copiato sopra. Ciò evita di copiare o distribuire script che non sono effettivamente in uso.

Se volete dare un'occhiata a come siamo in squadra Yeoman utilizzare questo tipo di configurazione, date un'occhiata al nostro file Gulp qui, che utilizza anche il compito useref:

https://github.com/yeoman/generator-gulp-webapp/blob/master/app/templates/gulpfile.js#L27