Что такое чистый фронт-рабочий процесс с беседкой и gulp?

Я действительно пытаюсь понять, как правильно устанавливать и обновлять клиентские ресурсы от сторонних поставщиков. Все, что я действительно хочу сделать, это получить текущие версии и скопировать готовые файлы в фиксированное место. Лучшее, что я смог придумать до сих пор, - это уродливая вещь:

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

Я читал много, чтобы попытаться выяснить лучшие практики и инструменты для развертывания клиентов, но только что запутался. Я уверен, что интерфейс будет сложнее, чем просто выбирать пакеты и запускать "композиторское обновление", но это кажется довольно глупым. Каковы некоторые лучшие способы справиться с этим?

Ответы

Ответ 1

Всякий раз, когда я работаю над приложением на уровне производства, а не вручную обрабатываю копирование определенных активов поставщика в каталог, я разрешаю моему процессу сборки просматривать мои соответствующие файлы разметки, ссылающиеся на теги <script> и выяснить, что нужно скопировать. Это позволяет избежать копирования или развертывания сценариев, которые фактически не используются.

Если вы хотите взглянуть на то, как мы в команде Yeoman используем этот тип настройки, посмотрите здесь наш Gulp файл, который также использует задачу useref:

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