Using Bower with Express

Question

I'm a late arrival to the Bower scene. I thought I'd try it with my current Express project. I installed it, and created the .bowercc and bower.json file per instructions. I installed a Bootstrap skin I planned on using, which brought with it jQuery. The thing is, you get tons of files, and I'd like to use just the minified versions of JS, CSS and fonts.

After scowering the net, I found a lot about using gulp or grunt to sift through the files, and pipe them to the /public folder Express provides. My question is: how do you do it properly? How do I get just the files I need there? Or am I better off foregoing bower and just downloading the zip file, picking up the end result and placing in the /public folder?

Answer 1

Looking at the comments, it seems like the answer is yes - manual job is required to get your components distributeables to your public folder. Using gulp will automate it, but basically it'd be a hit-and-miss at first, requiring some fine tuning. In case someone lands on this question, here's the solution I went with:

1) Provide package overrides in the bower.json file to ake sure only the minified files are exposed:

{
  "name": "charlie",
  "dependencies": {
    "bootstrap-material-design": "~0.3.0"
  },
  "overrides": {
    "bootstrap-material-design": {
      "main": ["**/dist/js/*.min.js", "**/dist/css/*.min.css", "**/dist/fonts/*"]
    },
    "jquery": {
      "main": "**/dist/jquery.min.js"
    }
  }
}

2) Use the main-bower-files gulp package to grab those "mains" and distribute them to the final locations. Here's my gulpfile.json (just the bower part:

var bower = require('main-bower-files');
var gulpFilter = require('gulp-filter');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var clean = require('gulp-clean');
var debug = require('gulp-debug');


var getDist = function(vendor) {
  var publicDir = 'public';
  var dist = vendor ? publicDir + '/vendor' : publicDir;
  return {
    dir: dist,
    css: dist + '/css/',
    js: dist + '/js/',
    fonts: dist + '/fonts/'
  };
};

gulp.task('cleanVendor', function() {
  return gulp.src(getDist(true).dir, {read: false})
    .pipe(clean());
});

gulp.task('bower', ['cleanVendor'], function() {
  var dist = getDist(true);
  var jsFilter = gulpFilter('**/*.js');
  var cssFilter = gulpFilter('**/*.css');
  var fontsFilter = gulpFilter(['**/*.woff*', '**/*.eot', '**/*.svg', '**/*.ttf']);
  return gulp.src(bower())
    .pipe(fontsFilter)
    .pipe(gulp.dest(dist.fonts))
    .pipe(fontsFilter.restore())
    .pipe(jsFilter)
    .pipe(gulp.dest(dist.js))
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(gulp.dest(dist.css))
    .pipe(cssFilter.restore());
});

3) In your HTML file, include /vendor/js/blah.min.js or /vendor/css/blah.min.css

Note: the annoying part was that I had to specify every font extension in the fontsFilter. I tried using '**/fonts/*' but main-bower-files returns a flat list of files, and if you provide the {base: 'mybase'} parameter, it returns a tree, meaning you get the entire tree structure per file - anyone who can come up with a fix, is invited to submit an answer.