将 CSS url 替换为 Gulp 任务
Replace CSS url with Gulp task
我尝试使用 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]
好的,我终于找到了解决方案:
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 替换 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]
好的,我终于找到了解决方案:
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));