Настройка Bower с Gulp (и веб-стартером)

Question

С возможностью иметь папку bower_component за пределами папки app, как можно будет загружать пакеты баннеров для работы с глотком? План состоит в том, чтобы использовать Web Starter Kit, у которого есть gulp, синхронизация браузера уже настроена.

Я думаю, что установка будет состоять в том, чтобы переместить модули башенки, с gulp - у этого есть задача скопировать указанные модули на app/scripts/vendors или app/styles/vendors. Таким образом, он выполнит две задачи (один для скриптов и один для стилей).

Он скопирует его, и если будут загружены более новые обновления - замените существующие файлы. Concat и Minify независимо от того, обслуживаете или стройте.

Поскольку WSK уже строит main.js, пакеты баннеров будут встроены в файл library.js. Может ли кто-нибудь вести меня в правильном направлении, чтобы построить эту настройку?

Я приложил несколько вещей, которые, по моему мнению, потребуются.

app/index.html

<!-- build:js scripts/vendor.js --> 
    <script src="bower_components/angular/angular.js"></script> 
<!-- endbuild --> 

Построить в /dist/scripts/venfors.js

gulpfile.js

// Bower - bower_components directory - located to root folder 
var directory = { 
    bower = './bower_components/' 
}; 

// Bower - Scripts 
gulp.task('bower-scripts', function() { 
    return gulp.src([ 
    // AngularJS 
    directory.bower+'bower_components/angular/angular.js' 
    ]) 
    .pipe(--- Copy src to /app/scripts/vendor ---) 
}); 

Не уверен, что если есть что-нибудь еще мне нужно сделать? Или если моя установка неверна?

Причина, по которой я хочу сохранить папку bower_components в корневой папке, а не в папке приложения, чтобы все было чище.

Краткое описание: Настройка Gulp и WSK с использованием беседки с папкой bower_components вне папки «Приложение».

Answer 1

Таким образом, я считаю, что это должно помочь другим:

Что мы делаем, копирование над пакетами более из bower_components папки в папку root в нашей папке приложения сценариев.

// Bower - Scripts 
gulp.task('bower-scripts', function() { 
    var directory = { bower : './bower_components/' }; 

    return gulp.src([ 
    directory.bower+'**/*.min.js' 
    ]) 
    // Output Files 
    .pipe(gulp.dest('app/scripts/vendor')) 
}); 

Когда мы позвонили gulp serve, нам нужно добавить bower-scripts задачу как зависимость нашей serve задачи

В index.html, укажите пакет Бауэр, который вы хотите использовать, как так:

<!-- build:js scripts/library.min.js --> 
    <script src="scripts/vendor/angular/angular.min.js"></script> 
<!-- endbuild --> 

Чем вы бежите gulp (для сборки) или gulp serve (чтобы проверить) - все должно встать на свои места.

Если вы можете оптимизировать это - или сделать его более эффективным, чем сбросить строку!