gulp-asset-version （gulp插件：添加前端资源版本号）

作者：JAY 2017-04-27

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>



The following is Chinese translation.（以下是中文翻译）



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.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>

运行后: 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>


TOP