Как изменить путь файла в html при сборке?

Question

[MarsFM]

Подскажите плз, как изменить путь стилей в html файле?

Я собираю проект из папки dev в build. Внутри dev находится index.html c
<link rel="stylesheet" href="less/main.less">

при сборки этот путь должен замениться на
<link rel="stylesheet" href="css/main.css">

Есть решение вынести index.html в корень, но хотелось бы понять именно такой путь)

gulpfile.js

const path = require('path');

const { src, dest, parallel, series } = require('gulp');
const clean = require('gulp-clean');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed');
const watch = require('gulp-watch');

const clear = () => {
  return src('./build/css', { read: false }).pipe(clean());
};

const html = () => {
  return src('./dev/*.html').pipe(dest('./build'));
};

const css = () => {
  return src('./dev/less/**/*.less')
    .pipe(changed('./build/css/'))
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(dest('./build/css'));
};

const observe = () => {
  watch('./dev/less/**/*.less', css);
  watch('./dev/*.html', html);
};

exports.default = series(clear, parallel(observe));

Comments

[Александр Викторович]

gulp-rename

const css = () => {
        return src('./dev/less/**/*.less')
            .pipe(changed('./build/css/'))
            .pipe(less()).pipe(autoprefixer())
            // gulp-rename
            .pipe(rename({
                extname: ".css"
            }))
            .pipe(dest('./build/css'));
    };

можно сразу прописать путь

<link rel="stylesheet" href="css/main.css">

или gulp-replace

const html = () => {
        return src('./dev/*.html')
            // gulp-replace
            .pipe(replace('.less', '.css'))
            .pipe(dest('./build'));
    };