How to efficiently manage and handle Bower packages with Gulp? (VS2015, Visual Studio 2015)
Background:
Visual Studio 2015 introduced Gulp and Bower for client-side package management..Net previously had a very efficient method of bundling / minifying and package management , but for some unknown reason this was removed in ASP.Net 5 / MVC 6 and we recommend using Gulp and Bower instead of this.
I have several vendor files that I want to use in my project, including jquery.appear, isotope, owl carousel, etc. etc.; some are simple JavaScript files, others are CSS, others are like fonts, images.
Scenario:
I am currently evaluating how best to use Bower for package versioning, using Gulp to extract only the necessary files from bower_components and uglify / minify / concat them into packages.
I am currently using the available CDN versions of scripts, but best practice assumes that I implement fault tolerance for local copies - IF . I can find a way to manage them with Bower / Gulp OR , just download them locally and give up package management.
Package management would be my preferred approach, but not if it's high maintenance in terms of scripting, config, overrides, etc.
What I have tried:
I have looked at Gulp packages like bower-main-files , gulp-bower-src (which appears to be blacklisted by Gulp) and I am currently using gulp-concat-vendor ; with this, I can handle basic packages that only contain individual JavaScript files (i.e. not CSS, unrelated assets like images).
Problems:
Some of the bower packages do not contain the correct information for exporting their core files (some have no core declarations at all).
Some of the packages load dependencies into bower_components at the top level, which clutters up files that I don't need (I only want the main (main) exported files, and the dependencies are usually already found elsewhere). These additional packages need even more configuration to exclude them from processing as part of the Bower Core Files.
In general, the Bower standards are "free" and are not followed even for popular packages.
Sometimes a certain order is required during concatenation. I haven't been able to find an elegant way to do this automatically - I've created an array of source files, but that's not ideal as each package requires manual inspection and editing, which basically negates the whole concept of package management.
Questions:
-
Do experienced front-end developers try to follow the same approach I'm trying (using bower_components as source), or just manually copy the required files from GitHub?
-
If you are using bower components, can you describe the workflow with Gulp and what plugins you use to filter only the files you need.
-
Is it possible to prevent unnecessary dependencies, tests, etc. from downloading bower in the first place?
-
When handling files that contain relative links (for example, CSS containing an image link), is it possible to fix the relative path to be relative to the specified output directory for such assets?
source to share
-
Yes.
-
See below.
-
Well, the deck package is the package, you get what's included. For your build, you either rely on bower.json components to define the core files or filter yourself. It's simple enough.
You can use filter = require ('gulp-filter') to filter files like this:
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));
})
source to share