How can I use gulp to concatenate bower_components that contain assets?

Question

I'm developing a sample application which uses bower for it's dependency management and gulp for it's build system.

I've used the main-bower-files plugin to copy all of the relevant files from the bower_components directory into a build/dist/bower_components directory.

This all works perfectly, and I can open my application's index.html which properly points to each of these files and they properly point to the assets.

My next step is to concatenate the bower_components so that I have a single CSS and a single JS file along with all of the assets (fonts, images, etc.). I have used gulp-useref to bundle all of the components, and it seems to work nicely.

However, some of the CSS and JS files being combined use relative paths to reference assets which are now incorrect since everything is in a single file:

• FontAwesome
• Bootstrap
• and a custom bower component we are creating

Is there a standard solution for fixing the assets?

Do I need to use gulp to update the asset references or perhaps use a different plugin?

Answer 1

Using gulp-replace plugin we can concatenate bower_components assests.

For example:

var replace = require('gulp-replace');

gulp.task('fix-paths', ['minify'], function() {
    gulp.src('public/css/site.css')
        .pipe(replace('../', '../bower_components/bootstrap/dist/'))
        .pipe(gulp.dest('public/css'));
}); 

Answer 2

I am using the gulp inject plugin to inject the concatenated file to the html. Something like this -

gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() {
    gulp.src('./*.html')
        .pipe(inject(gulp.src(['./dist/js/**/*.js'])
            .pipe(angularFilesort()), {
                'ignorePath': 'dist/js',
                'addRootSlash': false,
                'addPrefix': 'scripts'
            }))
        .pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], {
            read: false
        }), {
            'name': 'vendors',
            'ignorePath': 'dist/vendors',
            'addRootSlash': false,
            'addPrefix': 'vendors'
        }))
        .pipe(inject(gulp.src(['./dist/css/*.css'], {
            read: false
        }), {
            'ignorePath': 'dist/css',
            'addRootSlash': false,
            'addPrefix': 'styles'
        }))
        .pipe(gulp.dest('dist'));
});

Let me know if you need any more code.

Answer 3

For CSS, I would suggest using gulp-rework, which wraps rework that has a number of very helpful plugins.

One of these is url, which provides a function for updating the urls contained within CSS.

An example where this is useful, is in CSS that contains no path to replace; e.g.

url(backgroundimage2.png)

Or, you want to perform different alterations of the URL based on type (e.g. only images, not web fonts).

A function can be composed that tests for asset type; the following example processes only image files:

   // CSS
  .pipe(cssFilter)
  .pipe(rework(reworkUrl(function (url) {
      // modifications on url, e.g. using http://medialize.github.io/URI.js/   
      if (url.match(/[^/]+(jpg|jpeg|png|gif)$/))
      {
          return '/lib/img/' + url.replace('../', '');
      }
      else
      {
          return url;
      }

   })))