Gulp-url-transform NPM

gulp-url-transform

Change the reference path to a specific location inside the file.

Install

npm install --save-dev gulp-url-transform

Examples

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");
}

Usage

Let's say you have this structure:

t_static
|-- business
|   |-- css
|   |   `-- index.css
|   |-- image
|   |   `-- bg.png
|   |--js
|   |   `-- index.js
|   `--index.html
`-- gulp.js

In /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>

API

Conversion into absolute path

transform.toAbsolute(options)

options:
- base: (default .) The path of document root.
- keyword: (default __uri) Convert the url that this keyword contains.
- debug:(default false) 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 path
    - contents: document content
- after: (default (absPath, file) => absPath) Call after replacement.
  - absPath: Replaced absolute path
  - file: Replace the path where the file.
    - path: file path
    - contents: document content

Conversion into relative path.

transform.toRelative(options)

options:
- base: (default .) The path of document root.
- keyword: (default __uri) Convert the url that this keyword contains.
- debug:(default false) 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 path
    - contents: document content
- after: (default (relPath, file) => relPath) Call after replacement.
  - relPath: Replaced relative path
  - file: Replace the path where the file.
    - path: file path
    - contents: document content

License

Gulp-url-transform is licensed under the MIT license. (http://opensource.org/licenses/MIT)

gulp gulpplugin replace transform batch

gulp-util lodash through2

@infinitebrahmanuniverse/nolb-gulp-u @everything-registry/sub-chunk-1813

0.0.2

8 years ago

0.0.1

8 years ago