Question

我尝试使用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]

Answer 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));

用Gulp任务替换CSS URL

1 个答案: