gulp-main-bower-files

================

Use main-bower-files in a more gulp like way.

Use the bower.json file as the source and it will create a vinyl stream for each of the files main-bower-files return when parsing the bower.json.

Installation

$ npm install gulp-main-bower-files --save-dev

Usage

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

gulp.task('main-bower-files', function() {
    return gulp.src('./bower.json')
        .pipe(mainBowerFiles([[filter, ]options][, callback]))
        .pipe(gulp.dest('./wwwroot/libs'));
});

The parameters are passed on to main-bower-files.

Using the Gulp pipeline to minify the resulting JavaScript

The following example produces minified output using gulp-uglify

$ npm install --save-dev gulp-uglify

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

gulp.task('uglify', function(){
    return gulp.src('./bower.json')
        .pipe(mainBowerFiles( ))
        .pipe(uglify())
        .pipe(gulp.dest('wwwroot/libs'));
});

Using the Gulp pipeline to use Bootstrap with jQuery and minify the resulting JavaScript

var gulp = require('gulp');
var mainBowerFiles = require('gulp-main-bower-files');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gulpFilter = require('gulp-filter');

gulp.task('main-bower-files', function() {
    var filterJS = gulpFilter('**/*.js', { restore: true });
    return gulp.src('./bower.json')
        .pipe(mainBowerFiles({
            overrides: {
                bootstrap: {
                    main: [
                        './dist/js/bootstrap.js',
                        './dist/css/*.min.*',
                        './dist/fonts/*.*'
                    ]
                }
            }
        }))
        .pipe(filterJS)
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(filterJS.restore)
        .pipe(gulp.dest('./wwwroot/libs'));
});

1