Co to jest czysty front-end workflow z altanką i łykiem?

Question

Naprawdę walczyłem, aby dowiedzieć się, jak czysto instalować i aktualizować zasoby po stronie klienta od niezależnych dostawców. Wszystko, co naprawdę chcę zrobić, to pobrać aktualne wersje i skopiować pliki gotowe do produkcji do stałej lokalizacji. Najlepszą udało mi się wymyślić do tej pory jest to brzydka rzecz:

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

Czytałem dużo, aby spróbować dowiedzieć się najlepsze praktyki i narzędzia dla wdrożeń klienckich, ale zostały właśnie coraz coraz bardziej zdezorientowany. Jestem pewien, że front-end będzie bardziej złożony niż tylko wybieranie pakietów i uruchamianie "aktualizacji kompozytora", ale wydaje się to dość kludgy. Jakie są lepsze sposoby radzenia sobie z tym?

Answer 1

Ilekroć pracuję nad aplikacją na poziomie produkcyjnym, zamiast ręcznie obsługiwać kopiowanie określonych zasobów dostawcy do katalogu, zezwalam procesowi kompilacji na przeglądanie moich odpowiednich plików znaczników odnoszących się do wszelkich znaczników <script> i ustalić, co należy skopiować. Zapobiega to kopiowaniu lub wdrażaniu skryptów, które nie są aktualnie używane.

Jeżeli chcesz przyjrzeć się w jaki sposób możemy w zespole Yeoman korzystać z tego typu instalacji, przyjrzeć się naszym pliku haustem tutaj, które również wykorzystuje zadanie useref:

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