Change the reference path to a specific location inside the file.
npm install --save-dev gulp-url-transform
gulp js
const transform = require("gulp-url-transform");
gulp.task("build:absolute:all", ()=>{
gulp.src("./t_static/**/**")
.pipe(transform.toAbsolute())
.pipe(gulp.dest('./t_static/'));
});file in
body{
background-image: url(__uri(../images/bg1.png));
}file out
body{
background-image: url("/t_static/business/images/bg1.png");
}Let's say you have this structure:
t_static
|-- business
| |-- css
| | `-- index.css
| |-- image
| | `-- bg.png
| |--js
| | `-- index.js
| `--index.html
`-- gulp.jsIn /t_static/business/css/index.css you might have:
body{
background-image: url(__uri(../images/bg1.png));
}In /t_static/business/js/index.js you might have:
let file = "__uri(../images/bg.png)";In /t_static/business/input.html you might have:
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<link rel="stylesheet" href="__uri(./css/index.css)">
</head>
<body>
</body>
</html>In /gulp.js you might have:
const gulp = require("gulp");
const transform = require("gulp-url-transform");
gulp.task("default", ()=>{
gulp.src("./t_static/**/**")
.pipe(transform.toAbsolute({
debug: true
}))
.pipe(gulp.dest('./t_static/'));
});gulp
Out /t_static/business/css/index.css :
body{
background-image: url("/t_static/business/images/bg1.png");
}Out /t_static/business/js/index.js :
let file = "/t_static/business/images/bg.png";Out /t_static/business/input.html :
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<link rel="stylesheet" href="/t_static/business/css/index.css">
</head>
<body>
</body>
</html>transform.toAbsolute(options)
options:base: (default.) The path of document root.keyword: (default__uri) Convert the url that this keyword contains.debug:(defaultfalse) Whether to display conversion information.before: (default(relPath, file) => relPath) Call before replacement.relPath: Relative path to replace.file: Replace the path where the file.path: file pathcontents: document content
after: (default(absPath, file) => absPath) Call after replacement.absPath: Replaced absolute pathfile: Replace the path where the file.path: file pathcontents: document content
transform.toRelative(options)
options:base: (default.) The path of document root.keyword: (default__uri) Convert the url that this keyword contains.debug:(defaultfalse) Whether to display conversion information.before: (default(absPath, file) => absPath) Call before replacement.absPath: Absolute path to replace.file: Replace the path where the file.path: file pathcontents: document content
after: (default(relPath, file) => relPath) Call after replacement.relPath: Replaced relative pathfile: Replace the path where the file.path: file pathcontents: document content
Gulp-url-transform is licensed under the MIT license. (http://opensource.org/licenses/MIT)
Copyright (c) 2017-present