GULP: main-bower-files missing some files

Question

I'm using main-bower-files to get files via gulp to a certain folder. But certain css files are missing, even though they are inside bower_components folder.

For example CSS file viewer.css from "pdf.js-viewer" is not copied even though .js file from the same folder is.

Any idea what could be wrong? Any tips appreciated!

 // gulpfile.js: (skipped some unimportant libs etc. var gutil = require('gulp-util'); var bowerFiles = require('main-bower-files'); var paths = { localDev: '/.app' } var pipes = {}; pipes.moveBowerStyles = function() { gutil.log(bowerFiles()); // this already doesn't have appropriate viewer.css file from the mentioned lib for example (also some other are missing) return gulp.src(bowerFiles()) .pipe(gulp.dest(paths.localDev + '/assets/styles/lib')); }; gulp.task('default', ['moveBowerStyles']); // bower.json: { "name": "test", "description": "", "main": "", "license": "MIT", "homepage": "", "private": true, "dependencies": { "jquery": "^3.1.0", "angular-datatables": "^0.5", "angular": "^1.6.4", "angular-ui-router": "^1.0.0", "bootstrap": "^3.3", "font-awesome": "^4.6", "font-awesome-animation": "^0.0.9", "datatables": "^1.10", "angular-route": "^1.5", "angular-translate": "^2.12", "angular-cookies": "^1.6.4", "angular-translate-loader-url": "^2.12", "angular-translate-loader-static-files": "^2.12", "angular-translate-loader-partial": "^2.12", "angular-translate-storage-cookie": "^2.12", "angular-bootstrap": "^2.5.0", "bower-bootswatch-paper": "paper-less#*", "oclazyload": "1.1.0", "bower": "*", "install": "^1.0", "ngsecurity": "^1.6", "angular-permission": "^4.0", "angular-oauth2": "^4.1.0", "angular-schema-form": "^0.8", "ng-dialog": "^0.6", "bootstrap-select": "^1.11", "angular-select2": "^1.5.2", "angular-ui-select": "^0.19.8", "angular-media-queries": "^0.6", "jquery-ui": "^1.12.1", "angular-touch": "1.5.0", "AngularHammer": "ryanmullins-angular-hammer#^2.2.0", "angular-breadcrumb": "^0.5.0", "pdf.js-viewer": "^0.3.3", "angular-ui-sortable": "^0.16.1", "angular-animate": "1.6.4", "angular-file-upload": "^2.5.0", "angular-ui-mask": "^1.8.7", "angular-inview": "^2.2.0", "angular-ui-notification": "^0.3.6", "angular-bootstrap-switch": "^0.5.1", "bootstrap-switch": "^3.3.4", "angular-pdfjs-viewer": "^0.7.4", "ui-bootstrap": "angular-ui-bootstrap#^2.5.0", "angular-i18n": "^1.6.3", "angular-hotkeys": "chieffancypants/angular-hotkeys#^1.7.0", "angular-resource": "1.6.4", "select2": "^4.0.3", "angular-drag-and-drop-lists": "^2.1.0" }, "devDependencies": { "angular-translate": "^2.15.1" }, "resolutions": { "angular-cookies": "^1.6.4", "angular": "^1.6.4", "jquery": "^3.1.0", "bootstrap-switch": "3.3.2", "angular-bootstrap": "^0.10", "angular-translate": "^2.15.1", "select2": "~3.5.2" } } 

Answer 1

I figured it out.

Needed some more reading it seems: you can override the "main" files that are set by each package in it's own bower.json (some packages might even be without bower.json) by editing your bower.json like this:

{
   "name": "your-package-name",
   "dependencies": {
      "BOWER-PACKAGE": "*"
   },
   "overrides": {
      "BOWER-PACKAGE": {
        "main": "**/*.js"
      }
   }
}

Didn't know that overriding actually allows adding some additional files that are not marked as main files by the package. (for example I needed a CSS and one image from the package as well - not just JS file as it was).

You can see what the package's main files are if you check bower_components folder (what you get when you do "bower install") and look for the folder with the package you are interested in and then for bower.json.