How to glue bower components into one file in gulp?

Question

JavaScript

Actually the essence of the question is reflected in the title. At the output, I would like to get two files vendor.js, vendor.css (in which all paths to pictures and other things should remain working). With js, everything is clear, but with css, it's a problem.
Tried through stylus, but it didn't work, url() remain the same.

gulp.src(SRC + 'styles/vendor.styl')
      .pipe(plugins.stylus({ "include css": true, "resolve url": true }))
      .pipe(gulp.dest(DEST + 'styles'))

Answer 1

So, we need the main-bower-files, gulp-concat, gulp-filter and possibly gulp-order modules to keep the order of the js files.

var
  gulp = require('gulp'),
  concat = require('gulp-concat'),
  filter = require('gulp-filter'),
  order = require('gulp-order'),
  mainBowerFiles = require('main-bower-files')
;

gulp.task('scripts:vendor', function () {
  var vendors = mainBowerFiles();
   
  return gulp.src(vendors)
     .pipe(filter('**.js'))
     .pipe(order(vendors))
     .pipe(concat('vendor.js'))
     .pipe(gulp.dest('dist/'))
  ;
})

And it's the same with styles. If you are embarrassed by code duplication, you can use the lazy-pipe module and do everything in general nicely.

Answer 2

Gulp and Bower are here. Setting up streaming library builds... I tried to explain in detail how to make bower friends with the gulp streaming builder

Answer 3

I collect into one file with gulp-usemin

Answer 4

-> main-bower-files <-

const mainBowerFiles=require('main-bower-files');

gulp.task('task-name',function(){
  return gulp.src(mainBowerFiles({
  filter:'**/*.js', //css
    paths: {
        bowerDirectory: 'path/for/bower_components',
        bowerrc: 'path/for/.bowerrc',
        bowerJson: 'path/for/bower.json'
    }
}))
  .pipe(concat('vendor.js'))
  .pipe(gulp.dest('path/js'));
});