如何将css文件中的引用图像复制到dist文件夹答案

【问题标题】：How to copy referenced images in css files to dist folder如何将css文件中的引用图像复制到dist文件夹
【发布时间】：2016-10-27 12:21:29
【问题描述】：

我有以下 index.html 文件头：

<head>
<title>Visualization</title>
<!-- build:css styles/build.css -->
<link rel="stylesheet" href="../bower_components/bootstrap/css/bootstrap.custom.min.css">
<!-- inject:css -->
<link rel="stylesheet" href="app/index.css">
<link rel="stylesheet" href="app/components/graph/graph.component.css">
<link rel="stylesheet" href="app/components/highchart/highchart.component.css">
<link rel="stylesheet" href="app/components/my-app/app.component.css">
<!-- endinject -->
<!-- endbuild -->

我现在面临的问题如下：

文件../bower_components/bootstrap/css/bootstrap.custom.min.css 包含对字体和图像的引用。

bower_components
  bootstrap
    css
      bootstrap.custom.min.css
      i
        logo.png
    fonts
      glyphicons-halflings-regular.eot
      glyphicons-halflings-regular.svg
src
  index.html

我想编写一个 bower 脚本，将这些文件复制到我用来部署我的应用程序（包括实际层次结构）的 dist 文件夹。

由于我多次遇到此问题，因此我想编写一个通用（首选 gulp）任务来解决此问题。

非常感谢您的帮助。

【问题讨论】：

标签： html css gulp assets

【解决方案1】：

您必须使用任务运行程序来复制您的文件。这是一个简单的 gulp 设置，用于将图像、字体和 css 从 bower_components 复制到您的 dist 文件夹。您可能需要调整 source 和 dist 路径。

var gulp = require('gulp');

gulp.task('copy:css', function() {
  return gulp.src('./bower_components/path/to/css')
    .pipe(gulp.dest('./dist/assets/css'))
});

gulp.task('copy:fonts', function() {
  return gulp.src('./bower_components/path/to/fonts')
    .pipe(gulp.dest('./dist/assets/fonts'))
});

gulp.task('copy:images', function() {
  return gulp.src('./bower_components/path/to/images')
    .pipe(gulp.dest('./dist/assets/images'))
});

如果您使用多个位置，您可以为源文件使用数组而不是字符串。

gulp.task('copy:images', function() {
  return gulp.src([
    './bower_components/module1/path/to/images',
    './bower_components/module2/path/to/images'
  ])
    .pipe(gulp.dest('./dist/assets/images'))
});

要执行您的脚本，请运行 gulp copy:css、gulp copy:fonts、gulp copy:images

【讨论】：

好吧，正如我上面所说，我知道如何“手动”完成，我想要一个任务，使用 CSS 文件中包含的对字体和图像的引用来自动复制这些文件.
我刚找到bower-files npmjs.com/package/bower-files。看起来这完全符合您的要求。