Use gulp-bower-normalize to copy all files to one directory

Question

Can I use gulp-bower-normalize to copy different types of files from one directory to other one?

I thought I can do that like this, but it just copies all fonts to their directories based on their file extensions.

"overrides": {
    "font-awesome": {
        "main": [
            "css/font-awesome.min.css",
            "fonts/*"
        ],
        "normalize": {
            "fonts": "fonts/*.*"
        }
    }
}

And removing the "fonts/*" from main will just copy the css.

PS.: I know I can do that by gulp.src() and gulp.dest() but I was wondering about the "normalize-way".

Answer 1

//- gulpfile.js file
var bower = require('main-bower-files');
var bowerNorm = require('gulp-bower-normalize');
var DEST = './build/';

gulp.task('default', function () {
  return gulp.src(bower(), { base: './path/to/bower_components'})
    .pipe(bowerNorm({ flatten: true }))
    .pipe(gulp.dest(DEST));
});

//- bower.json file
"overrides": {
  "font-awesome": {
    "main": [
      "css/font-awesome.min.css",
      "fonts/*"
    ],
    "normalize": {
      "fonts": [ "*.eot", "*.svg", "*.ttf", "*.woff", "*.woff2" ]
    }
  }
}

The above should solve your problem. When you use the normalize key under the dependencies key (in this case "font-awesome" ) the child keys ( "fonts" ) represent the folder names you're trying to create. The value or values for that key are the file types you want to put in that directory. So in the above solution we are saying, we would like to put "*.eot" , "*.svg" , "*.ttf" , "*.woff" , and "*.woff2" files in the "fonts" directory when we normalize our dependencies.

The result of the above code would be this:

build/
├── css/
│   └── font-awesome.min.css
└── fonts/
    ├── some-font-file.eot
    ├── some-font-file.svg
    ├── some-font-file.ttf
    ├── some-font-file.woff
    └── some-font-file.woff2

Let me know if I can clarify further.