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

这是样式的 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/跑。