GitHub: https://github.com/oonne/gulp-asset-version.
Author: JAY
gulp-asset-version
a plugin for gulp.js to add version after file's name by content hash.
test.html -> test.html?v=7f499bc7
test.css -> test.css?v=f83a98d9
Installation
Either run
npm install gulp-asset-version
Usage
var gulp = require('gulp');
var assetVersion = require('gulp-asset-version');
gulp.task('css',function() {
gulp.src("./test/styles/test.css")
.pipe(assetVersion())
.pipe(gulp.dest('./dest/styles'));
});
gulp.task('html',function() {
gulp.src("./test/test.html")
.pipe(assetVersion())
.pipe(gulp.dest('./dest'));
});
Options
rootPath: it should be assigned when the asset's path is an absolute path.
Type: String
Default: ""
Example
before: test.css
body{background:url('../images/bg.png')}
after: test.css
body{background:url("../images/bg.png?v=1434f26c"}
before: test.html
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="./styles/test.css" type="text/css" />
</head>
<body>
<div>
<img src="./images/test.png" />
</div>
<script src="./scripts/test.js" type="text/javascript"></script>
</body>
</html>
after: test.html
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="./styles/test.css?v=55440a04" type="text/css" />
</head>
<body>
<div>
<img src="./images/test.png?v=72ceqefw" />
</div>
<script src="./scripts/test.js?v=4f97eec9" type="text/javascript"></script>
</body>
</html>
中文文档
gulp-asset-version
一个gulp.js的插件,通过计算文件的md5值为前端资源文件添加版本号。效果如下:
test.html -> test.html?v=7f499bc7
test.css -> test.css?v=f83a98d9
安装
运行
npm install gulp-asset-version
使用
var gulp = require('gulp');
var assetVersion = require('gulp-asset-version');
gulp.task('css',function() {
gulp.src("./test/styles/test.css")
.pipe(assetVersion())
.pipe(gulp.dest('./dest/styles'));
});
gulp.task('html',function() {
gulp.src("./test/test.html")
.pipe(assetVersion())
.pipe(gulp.dest('./dest'));
});
配置项
rootPath: 如果您使用的是绝对路径,那么必须通过这个参数设置您的绝对路径。字符串类型,默认为空,即当前目录作为绝对路径。
例子
运行前: test.css
body{background:url('../images/bg.png')}
运行后: test.css
body{background:url("../images/bg.png?v=1434f26c"}
运行前: test.htmltml
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="./styles/test.css" type="text/css" />
</head>
<body>
<div>
<img src="./images/test.png" />
</div>
<script src="./scripts/test.js" type="text/javascript"></script>
</body>
</html>
运行后: test.html
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="./styles/test.css?v=55440a04" type="text/css" />
</head>
<body>
<div>
<img src="./images/test.png?v=72ceqefw" />
</div>
<script src="./scripts/test.js?v=4f97eec9" type="text/javascript"></script>
</body>
</html>