gulp任務瀏覽器后找不到字體

Question

在我執行任務以從bower_component復制字體之后，瀏覽器似乎與正確的路徑混淆了。

這是字體的gulp任務：

// 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'));
});

這是樣式的關鍵任務：

// 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' }));
});

如何調整gulp文件，以便創建的CSS文件尋找正確的路徑？

Answer 1

您可以使用gulp-replace 。 例：

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'));
});

如果例如bootstrap在original-path/fonts/下具有其字體，則在運行styles任務后，該路徑現在將替換為new-path/fonts/ 。