Как эффективно управлять и обрабатывать пакеты Bower с помощью Gulp? (VS2015, Visual Studio 2015)

Question

фона:

Visual Studio 2015 представила Gulp и Бауэр для управления клиентской стороны пакета. .Net ранее имел очень эффективный метод bundling/minification and package management, но по неопределенной причине это было удалено в ASP.Net 5/MVC 6, и рекомендуется использовать Gulp и Bower вместо этого.

У меня есть несколько файлов поставщиков, которые я хочу использовать в моем проекте, включая jquery.appear, изотоп, сова-карусель и т. Д. И т. Д .; некоторые из них - простые файлы JavaScript, другие - CSS, другие - такие, как шрифты, изображения.

Сценарий:

На данный момент я оценки того, как наилучшим образом использовать Bower для управления версиями пакетов, при использовании Gulp извлечь только необходимые файлы из bower_components и уродовать/преуменьшать/CONCAT их в пучки ,

я в настоящее время с помощью CDN доступных версий сценариев, но лучше практика предложила бы мне реализовать отказоустойчивость для локальных копий - IF я могу найти способ, чтобы управлять ими с помощью Бауэр/Gulp ИЛИ просто скачать их на местном уровне , и отказаться от управления пакетами.

управления пакетами будет мой предпочтительный подход, но если это высокое содержание в терминах сценариев, конфигурации, переопределения и т.д.

То, что я пробовал:

Я посмотрел на пакеты глотком таких как bower-main-files, gulp-bower-src (который, по-видимому, внесен в черный список Gulp), и в настоящее время я использую gulp-concat-vendor; с этим я могу обрабатывать базовые пакеты, которые содержат только отдельные файлы JavaScript (т. е. не CSS, не связанные с ними активы, такие как изображения).

Проблема:

Некоторые из пакетов Бауэра не содержат правильную информацию для экспорта своих основных файлов (некоторые не имеют основные деклараций на всех).

Некоторые из пакетов загружают зависимости в bower_components на верхнем уровне, который загромождает файлы, которые мне не нужны (я хочу только основные (основные) экспортированные файлы, а зависимости обычно уже встречаются в другом месте). Эти дополнительные пакеты нуждаются в еще большей конфигурации, чтобы исключить их из обработки как часть «Основные файлы Bower».

В целом, стандарты Bower «свободны» и не соблюдаются даже для популярных пакетов.

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

Вопросы:

1. ли опытные интерфейсные разработчики пытаются следовать такой же подход, как я пытаюсь (с использованием bower_components в качестве источника), или просто вручную скопировать необходимые файлы из GitHub?

2. Если вы используете компоненты bower, можете ли вы описать рабочий процесс с помощью Gulp и какие плагины вы используете для фильтрации только тех файлов, которые вам нужны.

3. Можно ли предотвратить ненужный зависимости, тесты и т.д. от того загружены Бауэр в первую очередь?

4. При обработке файлов, содержащих относительные ссылки (например, CSS, содержащие ссылку на изображение), можно ли исправить относительный путь относительно указанного выходного каталога для таких активов?

Answer 1

1. Да.

2. См. Ниже.

3. Ну, пакет палубы - это пакет, вы получаете что-то включено. Для вашей сборки вы либо полагаетесь на компоненты bower.json, которые определяют основные файлы или сами фильтруют. Это достаточно просто.

Вы можете использовать фильтр = требуется («глотком фильтр») фильтровать файлы так:

var gulp = require('gulp'), 
    bower = require('gulp-main-bower-files'), 
    filter = require('gulp-filter'), 
    concat = require('gulp-concat'), 
    rename = require('gulp-rename'), 
    srcmaps = require('gulp-sourcemaps'), 
    jsminify = require('gulp-uglify') 
    cssminify = require('gulp-csso'), 
    del = require('del'); 

var src = { 
    js: 'app/**/*.js', 
    css: 'app/**/*.css', 
    content: ['app/**/*.jpg', 'app/**/*.svg', 'app/**/*.png', 'app/**/*.ico', 'app/**/*.html'] 
} 

var dst = { 
    pub: 'pub/', 
    lib: 'pub/lib/' 
} 

gulp.task('bower', ['start-build'], function() { 
    var jsfilter = filter('**/*.js') 
    var cssfilter = filter('**/*.css') 
    return gulp.src('bower.json') 
     .pipe(bower()) 
    .pipe(jsfilter) 
    .pipe(concat('lib.min.js')) 
     .pipe(jsminify()) 
    .pipe(gulp.dest(dst.lib)) 
    .pipe(jsfilter.restore()) 
    .pipe(cssfilter) 
    .pipe(concat('lib.min.css')) 
     .pipe(cssminify()) 
    .pipe(gulp.dest(dst.lib)) 
    .pipe(cssfilter.restore()) 
    .pipe(rename(function (path) { 
     if (~path.dirname.indexOf('fonts')) { 
      path.dirname = '/fonts' 
     } 
    })) 
    .pipe(gulp.dest(dst.lib)); 
}) 

gulp.task('js', ['start-build'], function() { 
    return gulp.src([src.js]) 
     .pipe(srcmaps.init()) 
     .pipe(concat('app.min.js')) 
     .pipe(jsminify()) 
     .pipe(srcmaps.write()) 
     .pipe(gulp.dest(dst.pub)); 
})