gulp 属性替换

syy-mp 小程序脚手架用它来处理 wxml\less\sass\wxss 文件的图片链接，将 image 标签的 src、 css 的 backgroud: url() 等替换成云存储链接。此库通用，并不局限于syy-mp 小程序脚手架中

Getting Started

npm i @syyfe/gulp-replace-attribute --save-dev

Settings

export interface IOptions {
    /**
     * 替换追加前缀
     * @type {string}
     * @memberof WxmlUrlRewrite
     */
    base?: string;

    /**
     * wxml 匹配属性
     * @type {Record<string, string>}
     * @memberof WxmlUrlRewrite
     */
    wxmlAttribute?: Record<string, string>;

    /**
     * 自定义替换URL方法
     * @type {*}
     * @memberof IParams
     */
    rewriteURL?: any;

    /**
     * CSS样式的替换，默认开启
     * @type {boolean}
     * @memberof IOptions
     */
    replaceCss?: boolean;
}

默认 wxmlAttribute 属性配置

wxmlAttribute = {
    image: "src",
    video: "poster",
    "cover-image": "src"
};

Usage

const gulp = require("gulp");
const gulpReplaceAttribute = require("@syyfe/gulp-replace-attribute");

gulp.src("./src/**/*.{css,wxml}")
    .pipe(
        new gulpReplaceAttribute({
            base: "http://www.73160.com/static/images/",
            wxmlAttribute: {
                "van-empty": "image"
            }
        })
    )
    .pipe(gulp.dest("./dist"));

自定义 URL 替换方法

const gulp = require("gulp");
const gulpReplaceAttribute = require("@syyfe/gulp-replace-attribute");

gulp.src("./src/**/*.{css,wxml}")
    .pipe(
        new gulpReplaceAttribute({
            wxmlAttribute: {
                "van-empty": "image"
            },
            rewriteURL: (val) => {
                return "https://www.71360.com/static" + val;
            }
        })
    )
    .pipe(gulp.dest("./dist"));

Demo

examples