How to include only the necessary js and css when building with Gulp?

Question

gulp.js

Hello. I wondered about building a project on Gulp. When automatically connecting js and css through Bower, paths like "bower_components/normalize-css/normalize.css" are written to the downloaded packages, and there are a lot of unnecessary files. It is possible to pull files from packages with the main-bower-files plugin, but the paths will remain until the full packages. How can you rewrite paths?

Answer 1

If you use main-bower-files then include only those files that you specified in the
example task:

gulp.task('styles:vendor', function() {
  gulp.src(mainBowerFiles({
          "overrides": {
              "normalize.css": {
                  "main": "./normalize.css"
              },

              "magnific-popup": {
                  "main": "./dist/magnific-popup.css"
              },

              "bootstrap": {
                  main: [
                      './dist/css/bootstrap.css',
                      './dist/fonts/*.*'
                  ]
              }
          }
  }))
  .pipe(cssFilter)
  .pipe(concat('vendor.css'))
  .pipe(gulpIf(env !== 'dev', minifyCSS()))
  .pipe(gulp.dest(outputDir + 'css'))
});

and there are no files :)