Question

我有以下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）任务来处理这个问题。

非常感谢你的帮助。

Answer 1

您必须使用taskrunner来复制文件。这是一个简单的gulp设置，用于将图像，字体和CSS从bower_components复制到您的dist文件夹。您可能需要调整源和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文件中引用的图像复制到dist文件夹

1 个答案: