吞咽任务浏览器后找不到字体

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

这是样式的 gulp 任务：

// 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/。