Easily transform virtual paths inside any file to real paths
Install via npm:
npm install --save-dev gulp-map-transformGiven this section of a html file:
...
<head>
<link rel="stylesheet" href="@styles/test.scss" />
</head>
...And this configuration inside your gulpfile
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const mapTransform = require('gulp-map-transform');
const OUT_PATH = '/dist/folder';
src('/html/files/**/*.html')
.pipe(
mapTransform({
search: /href="@styles\/(.*?).scss"/gi,
replace: /"(.*?)"/i,
rootPath: OUT_PATH,
rewrite: (path) => path.replace('@styles', 'css/files'),
transform: (stream) => stream
.pipe(sass())
.pipe(dest(path.join(OUT_PATH, 'css')))
})
)
.pipe(dest(OUT_PATH))This will generate the following html file after compiling the css file:
...
<head>
<link rel="stylesheet" href="/css/files/test.css" />
</head>
...| Name | Type | Required | Description |
|---|---|---|---|
| search | RegExp |
yes | This expression is used to identify in which location you want to execute a transformation of the content |
| replace | RegExp |
yes | This is used to replace the path of the file inside a result of the search matches |
| rewrite | Function | yes | Use this to tell what and how to replace the path inside the string found by the replace expression |
| transform | Function | yes | In this callback you get a separate stream to handle all your files already present with the real path |
| rootPath | string | no | The root path to which the transfomed file paths will be appended (with path.relative()) |
See the LICENSE file for license rights and limitations (MIT).