Was ist ein sauberer Front-End-Workflow mit Bower und Schluck?

Question

Ich habe wirklich Mühe gehabt, herauszufinden, wie clientseitige Assets von Drittanbietern sauber installiert und aktualisiert werden. Alles, was ich wirklich tun möchte, ist, die aktuellen Versionen zu holen und die produktionsbereiten Dateien an einen festen Ort zu kopieren. Das Beste, was ich in der Lage gewesen, mit so weit zu kommen ist dieses hässliche Ding:

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

Ich habe viel gelesen, um zu versuchen, die besten Praktiken und Tools für Client-Installationen, um herauszufinden, haben aber gerade bekommen mich selbst immer mehr verwirrt. Ich bin mir sicher, dass das Front-End komplexer sein wird, als nur Pakete auszuwählen und "Composer-Update" auszuführen, aber das scheint ziemlich klatschig zu sein. Was sind bessere Möglichkeiten, damit umzugehen?

Answer 1

Wenn ich an einer App auf Produktionsebene arbeite, anstatt das Kopieren bestimmter Anbieter-Assets manuell in ein Verzeichnis zu übernehmen, erlaube ich meinem Build-Prozess, sich meine relevanten Markup-Dateien anzusehen, die auf <script> Tags und Stellen Sie fest, was kopiert werden muss. Dies verhindert das Kopieren oder Bereitstellen von Skripts, die nicht tatsächlich verwendet werden.

Wenn Sie einen Blick darauf, wie wir auf dem Yeoman Team nehmen mögen diese Art von Setup verwenden, einen Blick auf unserer Gulp Datei nimmt hier, die auch die useref Aufgabe verwendet:

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