# gulp-css-url-custom-hash

> 为css中url路径加上基于该文件md5的hash值，具体的拼接方法可以自己定义。

Latest version **0.0.5** (published 2017-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-css-url-custom-hash
pnpm add gulp-css-url-custom-hash
yarn add gulp-css-url-custom-hash
bun add gulp-css-url-custom-hash
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2017-03-08 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zzefff |
| Maintainers | zzefff |
| Keywords | gulp, css, md5, hash |

## Links

- npm: https://www.npmjs.com/package/gulp-css-url-custom-hash
- Repository: https://github.com/zzefff/gulp-css-url-custom-hash
- Homepage: https://github.com/zzefff/gulp-css-url-custom-hash#readme
- Issues: https://github.com/zzefff/gulp-css-url-custom-hash/issues
- npm.io page: https://npm.io/package/gulp-css-url-custom-hash

## Dependencies (1)

- [through2](https://npm.io/package/through2.md) ^2.0.3

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2017-03-08
- 0.0.4 — 2017-03-06
- 0.0.2 — 2017-02-10
- 1.0.0 — 2017-02-10

## README

# gulp-css-url-custom-hash

## Feature

为css中url路径加上基于该文件md5的hash值，具体的拼接方法可以自己定义。

只会匹配绝对地址路径。

```css
// before:
background: url(/aa/bb/cc/dd.png)
// after:
background: url(/aa/bb/cc/dd.png?_=md5)
```

## Install

```java
npm install gulp-css-url-custom-hash
```

## Options

`customHash`

css文件中url路径的文件名与该文件hash值的拼接函数

`targetFileType`

需要获取md5值得文件类型，默认为 ['png', 'jpg', 'jpeg', 'gif', 'svg']

## Example

```javascript
var gulp var gulp = require('gulp');
var hash = require('gulp-css-url-custom-hash');

gulp.task('default', function () {
    return gulp.src('a.css')
        .pipe(urlCustomHash({
            customHash: function(fileName, hash){
                return fileName + '?_=' + hash.slice(0, 8);
            },
            targetFileType: ['png']
        }))
        .pipe(gulp.dest('dist'));
});

/*
 *
 *eg: md5 of 111.png is a6a2sgq0wqg12fg1g2
 *
 * before: 
 * .test{
 *     background-image: url(111.png);
 * }
 * .test2{
 *     background-image: url(222.jpg);
 * }
 * after:
 * .test{
 *     background-image: url(111.png?_=a6a2sgq0);
 * }
 * .test2{
 *     background-image: url(222.jpg);
 * }
 */
```

---
_Source: https://npm.io/package/gulp-css-url-custom-hash · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._