CODEWITHSUNDEEP
cssfontsgulptask
moeses
moeses

Reputation: 507

After gulp task browser can't find fonts

After i run my task to copy the fonts from the bower_component, the browser seems to be confused with the correct path.

This is the gulp task for fonts:

// Fonts
gulp.task('fonts', function() {
  return gulp.src(bowerDir + '/open-sans-fontface/fonts/**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
      .pipe(gulp.dest(dest + 'fonts'));
});

And this is the gulp task for styles:

// Styles
gulp.task('styles', function() {
  return plugins.sass(src + 'styles/main.scss', {
          style: 'expanded',
          loadPath: [
            // './resources/sass',
            bowerDir + '/bootstrap-sass/assets/stylesheets',
            bowerDir + '/font-awesome/scss',
            bowerDir + '/open-sans-fontface'
          ]
        })
      .pipe(plugins.autoprefixer('last 2 version'))
      .pipe(gulp.dest(dest + 'styles'))
      .pipe(plugins.rename({ suffix: '.min' }))
      .pipe(plugins.cssnano())
      .pipe(gulp.dest(dest + 'styles'))
      .pipe(reload({stream: true}));
      // .pipe(plugins.notify({ message: 'Styles task complete' }));
});

How do i adjust the gulp file, so the created css-file looks for the right path?

Upvotes: 0

Views: 2210

Answers (1)

Ciarán Tobin
Ciarán Tobin

Reputation: 7526

You can use gulp-replace. Example:

gulp.task('styles', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(plugins.sass())
    .pipe(plugins.replace('original-path/fonts/', 'new-path/fonts/'))
    .pipe(gulp.dest('dist'));
});

If e.g. bootstrap had it's fonts under original-path/fonts/ that path would now be replaced with new-path/fonts/ after the styles task is run.

Upvotes: 2

Related Questions