# @syyfe/gulp-replace-attribute

> gulp 属性替换

Latest version **1.0.1** (published 2022-05-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install @syyfe/gulp-replace-attribute
pnpm add @syyfe/gulp-replace-attribute
yarn add @syyfe/gulp-replace-attribute
bun add @syyfe/gulp-replace-attribute
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-05-07 |
| First published | 2022-04-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | henry.zhou |
| Keywords | gulp, replace |

## Links

- npm: https://www.npmjs.com/package/@syyfe/gulp-replace-attribute
- npm.io page: https://npm.io/package/@syyfe/gulp-replace-attribute

## Dependencies (3)

- [through2](https://npm.io/package/through2.md) ^4.0.2
- [css-url-rewriter](https://npm.io/package/css-url-rewriter.md) ^0.1.3
- [@syyfe/wxml-url-rewriter](https://npm.io/package/@syyfe/wxml-url-rewriter.md) 1.0.0

## Recent versions

- 1.0.1 (latest) — 2022-05-07
- 1.0.0 — 2022-05-07
- 0.0.3 — 2022-04-29
- 0.0.2 — 2022-04-28
- 0.0.1 — 2022-04-28

## README

# gulp 属性替换

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

# Getting Started

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

# Settings

```typescript
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 属性配置

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

## Usage

```javascript
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 替换方法

```javascript
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

---
_Source: https://npm.io/package/@syyfe/gulp-replace-attribute · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._