How to efficiently manage and process Bower packages with Gulp? (VS2015, Visual Studio 2015)

Question

Background:

Visual Studio 2015 has introduced Gulp and Bower for client side package management. .Net previously had a very efficient method of bundling / minification and package management, but for an unspecified reason this has been removed in ASP.Net 5 / MVC 6, and the advice is to use Gulp and Bower instead.

I have a number of vendor files that I wish to use in my project, including jquery.appear, isotope, owl-carousel etc, etc; some are simple JavaScript files, others have CSS, still others have assets such as fonts, images.

Scenario:

At the moment I am evaluating how to best utilise Bower to manage versions of packages, while using Gulp to extract only the necessary files from bower_components, and uglify / minify / concat them into bundles.

I am currently using CDN available versions of scripts, but best practice would suggest I implement fail-over to local copies - IF I can find a way to manage them using Bower / Gulp OR just download them locally, and forgo package management.

Package management would be my preferred approach, but not if this is high maintenance in terms of scripts, configurations, overrides etc.

What I have tried:

I have looked at Gulp packages such as bower-main-files, gulp-bower-src (which apparently is blacklisted by Gulp), and I am currently using gulp-concat-vendor; with this I can process basic packages which contain only single JavaScript files (i.e. not CSS, not related assets such as images).

Problems:

Some of the bower packages do not include correct information for exporting their main files (some have no main declarations at all).

Some of the packages download dependencies into bower_components at the top level, which becomes cluttered with files I do not need (I want only the main (core) exported files, and the dependencies are usually already met elsewhere). These additional packages need yet more configuration to exclude them from being processed as part of 'Bower Main Files'.

In general, Bower 'standards' are loose, and are not adhered to, even for popular packages.

During concatenation, sometimes a specific order needs to be achieved. I have been unable to find an elegant way to do this automatically - I have created an array of source files, but this is not ideal, as it requires manually checking and editing for each package, which mostly negates the whole concept of package management.

Questions:

1. Do experienced front-end developers attempt to follow the same approach as I am attempting (using bower_components as a source), or simply manually copy required files from GitHub?

2. If you do use bower-components, can you please outline the workflow with Gulp, and what plug-ins you use to filter out only the files you need.

3. Is it possible to prevent unneeded dependencies, tests, etc from being downloaded by Bower in the first place?

4. When processing files that include relative references (e.g. CSS containing a reference to an image), is it possible to correct the relative path, to be relative to the specified output directory for such assets?

Answer 1

1. Yes.

2. See below.

3. Well, bower package is package, you get whats included. For your build you either rely on components bower.json which specifies main files or do filtering yourself. It is simple enough.

You can use filter = require('gulp-filter') to filter files like that:

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));
})