用 Gulp 任务替换 CSS url答案

【问题标题】：Replace CSS url with Gulp task用 Gulp 任务替换 CSS url
【发布时间】：2017-02-10 17:29:42
【问题描述】：

我尝试使用 Gulp 替换 index.html 中 CSS 文件的路径。问题是我有多个项目不同的主题名，而分发包中源文件的路径不同

index.html

<link href="app/style/themes/dark/theme.css" id="hmi-theme" rel="stylesheet" />

在我的分发包中，主题被复制到 src\projects\project\app\style\themes

dist/index.html

<link href="[set the path here/]app/style/themes/dark/theme.css" id="hmi-theme" rel="stylesheet" />

这里尝试使用 gulp-find 在 index.html 中查找 url：

var gulp = require('gulp');
var find = require('gulp-find');
var replace = require('gulp-replace');

gulp.task('templates', function(){
    gulp.src(['index.html'])
        .pipe(find(/app\/style\/themes\/([^"]*)/g))
        .pipe(gulp.dest('file.txt'));

这行得通，我在目标文件中得到了值。但是是否可以通过 gulp-replace 使用此值来更改 HTML 文件中的值？

我也尝试过类似的方法：

.pipe(replace(/app\/style\/themes\/([^"]*)/g, "dist/" + find(/app\/style\/themes\/([^"]*)/g)))

但 index.html 中的值是：

dist/[object Object]

【问题讨论】：

标签： html css gulp gulp-rename

【解决方案1】：

好的，我终于找到了解决方案：

return gulp.src(path.join(projectDir, 'index.html'))
  .pipe(replace(/app\/style\/themes\/([^"]*)/g, function(cssPath) {
      return "my-new-path/" + cssPath;
  } ))
  .pipe(gulp.dest(distDir));

【讨论】：