https://github.com/weivea/gulp-html-helper

对html引用静态资源做处理的gulp插件
https://github.com/weivea/gulp-html-helper

Last synced: about 9 hours ago
JSON representation

对html引用静态资源做处理的gulp插件

• Host: GitHub
• URL: https://github.com/weivea/gulp-html-helper
• Owner: weivea
• License: mit
• Created: 2016-04-22T03:17:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-05-26T12:30:29.000Z (over 8 years ago)
• Last Synced: 2024-10-29T00:31:04.648Z (18 days ago)
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-html-helper

## Install

`npm install --save-dev gulp-html-helper `

## Usage

**ps:htmlHelper只处理相对路径的引用连接**

```

var gulp = require('gulp');

var htmlHelper = require('gulp-html-helper');

var option = {

    staticPath: '_devTmp/static',

    urlBasePath: 'static/',

    aliasPath: {'originalPath':'aliasPath'},

    md5:true

}

gulp.task('default', function () {

    return gulp.src('src/*.html')

        .pipe(htmlHelper(option))

        .pipe(gulp.dest('dist'));

});

```

## Option

- staticPath: html里面引用的静态资源被输出的目的目录（必填项）

- urlBasePath:html里面引用的静态资源链接的公共路径（默认为'/'）

- aliasPath:处理前,将HTML里面的静态资源引用链接做指定替换处理,遇到链接中有「originalPath」则先替换为「aliasPath」（不设置,则不做替换处理）

- rootPathIMG:图片资源跟路径,要求以相对路径格式书写(默认为程序运行路径)

- rootPathCSS:CSS资源跟路径,要求以相对路径格式书写(默认为程序运行路径)

- rootPathJS:JS资源跟路径,要求以相对路径格式书写(默认为程序运行路径)

- md5:处理链接时,是否加上md5

## Example

option配置如下

```

var option = {

    staticPath: '_devTmp/static',

    urlBasePath: 'static/',

    aliasPath: {'originalPath':'aliasPath'},

    md5:true

}

```

处理前的html

```

    

    

    react-babel

    

    







```

处理后的html

```

    

    

    react-babel

    

    







```

staticPath指定Path:_devTmp/static下的静态文件

- 5df5003623c86ad78e83fb55f825f008.jpg

- aa-d555e48d71746b90d810522ae7445f45.css

- index-596eb908f90deafc0ab196444e478eb1.js

##Todo

小的图片直接base64