How to use gulp-usemin package fonts

Question

I'm currently using the gulp-usemin pluign, however I'm struggling with one thing: using the images the package provides!

  <!-- build:css lib/css/main.min.css -->
  <link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css">
  <!-- endbuild -->

The font-awesome bower package also comes with the fonts:

bower_components/font-awesome/fonts/**.*

I currently compile my css with the usemin plugin:

gulp.task('usemin', function() {
    return gulp.src('src/index.html')
        .pipe(usemin({
            css: [minifyCss(), 'concat'],
        }))
        .pipe(gulp.dest('dist/'));
});

Right now this scans my HTML with the above build paths, and successfully minifies it.

However the problem I have, is that now my font-awesome CSS is looking for the fonts in the wrong place, as they're no longer in the same directory.

How do I fix this?

Where is the .dest() of the gulp stream? – Dave Lunny Oct 31 '14 at 19:07 — Dave Lunny, Oct 31 '14 at 19:07
Edited my question to show the whole task! – Alias Oct 31 '14 at 19:09 — Alias, Oct 31 '14 at 19:09

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Figured this out by finding this question: Can you remove a folder structure when copying files in gulp?

My task is now uses gulp-rename:

gulp.task('copy-bower_fonts', function() {
    return gulp.src(paths.bower_fonts)
        .pipe(rename({
            dirname: '/fonts'
        }))
        .pipe(gulp.dest('dist/lib'));
});

The fonts from the packages which look for ../fonts/ now points to a correct location.

edited May 23 '17 at 11:49

Community

1
1

answered Oct 31 '14 at 19:45

Alias

2,983
7
39
62

I believe that you can get rid of the *rename* pipe and change your gulp.src to `gulp.src(paths.bower_fonts, {base: paths.bower_fonts})`. – Ghidello Nov 01 '14 at 11:08

How to use gulp-usemin package fonts

1 Answers1