Gulp задача для объединения bower_components?

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

Скажем, этого не существует. В худшем случае я должен указать пути каждого файла "dist" из папки bower_components. (Досадно, что у каждого компонента есть своя папка "dist"... ничто не стандартизировано.)

Поэтому, даже если я это сделаю, я заметил, что некоторые компоненты, такие как "активная поддержка", похоже, имеют require('lodash') и такие в них. Я думаю, что если я просто просто скопирую этот файл, он сломается, потому что требования не будут разрешены.

Что мне не хватает? Как просто взять все bower_компоненты и расслоение в "common.js"... есть ли способ или это clusterfluck?

Ответы

Ответ 1

Update

Как было отмечено Alerty, новая политика Gulp, по-видимому, заключается в следующем: использовать привязку непосредственно и шаблоны glob (и надеемся, что поддерживающие пакеты имеют надлежащие свойства "игнорировать" ).

Ранее

Вы можете использовать main-bower-files или gulp-bower-src, чтобы получать файлы с ваших компонентов. Они также могут использовать "игнорировать" или "основные" переопределения в вашем собственном файле bower.

Ответ 2

Вот как мне это удалось (но см. gulpfile.js для структуры проекта, это не один гигантский gulpfile):

https://github.com/notbrain/viceroy/blob/master/gulp/tasks/bower.js

Было бы немного более модульным, чтобы просто конкатрировать все деаэры bower, а затем выполнять задачи uglify() и minifyCSS() отдельно в местоположениях dist/source на основе dev/prod env-целей, но придется ждать будущих обновлений.

Ответ 3

Используйте main-bower-files:

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');

gulp.task('TASKNAME', function() {
    return gulp.src(mainBowerFiles())
        .pipe(/* what you want to do with the files */)
});

Ответ 4

если у вас есть такие папки, как:

-app
-bower
-node_modules
Gulpfile.js
package.json

решение:

gulp.task("connect", function () {
  connect.server({
    root: ["app"],
    livereload: true,
    port: 8034,
    middleware: function (connect) {
      return [connect().use("/bower", connect.static("bower"))];
    }
  });
});

Ответ 5

Если ваш проект использует спецификацию AMD.

Вы можете использовать gulp-edp объединить модули.

установить информацию о модуле в module.conf

{
    "baseUrl": "src",
    "paths": {},
    "packages": [
        {
            "name": "etpl",
            "location": "../bower_components/etpl/3.0.1/src",
            "main": "main"
        },
        {
            "name": "jquery",
            "location": "../bower_components/jquery/1.9.1/src",
            "main": "jquery.min"
        }
    ],
    "combine": {
        "app": true
    }
}

gulpfile.js

var gulp = require('gulp');
var edp = require('gulp-edp');

gulp.src(
    [
        'src/**/*.js'
        'bower_components/**/*.js',
        '!bower_components/**/{demo,demo/**}',
        '!bower_components/**/{test,test/**}'
    ]
)
.pipe(edp({
    getProcessors: function () {
        var moduleProcessor = new this.ModuleCompiler();
        return [moduleProcessor];
    }
}))
.pipe(gulp.dest('dist'));

Подробнее см. EDP wiki.