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

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

html css gulp

Html 如何将css文件中的引用图像复制到dist文件夹,html,css,gulp,assets,Html,Css,Gulp,Assets,我有以下index.html文件头： <head> <title>Visualization</title>  <link rel="stylesheet" href="../bower_components/bootstrap/css/bootstrap.custom.min.css">  <link rel=

我有以下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脚本，将这些文件复制到

dist

文件夹中，我正在使用该文件夹部署我的应用程序，包括实际的层次结构

由于我有几次遇到这个问题，我想写一个通用的（最好是吞咽）任务来解决这个问题

非常感谢您的帮助。

您必须使用taskrunner来复制文件。下面是一个简单的gulp设置，用于将图像、字体和css从

bower\u组件

复制到您的

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:font

，

gulp copy:images

，

，我想有一个任务，使用CSS文件中包含的对字体和图像的引用来自动复制这些文件。我刚刚找到了bower文件。看起来这正是你想要的。
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'))
});