gulp-rev-easy

v1.2.3

Published

3 years ago

easy add hash to asset path uc.js to uc.js?v=afb23 or simple add date uc.js to uc.js?v=201503031214

Downloads

3,916

0High
0Medium
0Low

timtian

gulp rev hash revision static date url append cdn optimize

gulp-rev-easy

upgrade to [1.2.x] add new parse mode:plain, support unwell-formed html, if you want use old mode set revMode to 'dom', now default mode is plain mode

//options
{
    revMode:'plain'
}

Install

$ npm install gulp-rev-easy --save-dev

Examples

assets\index.css
assets\index.js
test.html
gulpfile.js

Input

//test.html
<!doctype html>
<html lang="en">
<head>
  <title>gulp-rev-easy</title>
  <link type="text/css" rel="stylesheet" media="all" 
    href="assets/index.css?max_age=1024">
</head>
<body>
  <img data-src="assets/audrey-hepburn.jpg" 
    src="assets/audrey-hepburn.jpg">
  <script src="assets/index.js?max_age=1024"></script>
</body>
</html>

Useage

//gulpfile.js
var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy())
    .pipe(gulp.dest("./dist"))
})

gulp reveasy

Output

<!doctype html>
<html lang="en">
<head>
  <title>gulp-rev-easy</title>
  <link type="text/css" rel="stylesheet" media="all"
    href="assets/index.css?max_age=1024&amp;v=0a1085be">
</head>
<body>
  <img data-src="assets/audrey-hepburn.jpg" 
    src="assets/audrey-hepburn.jpg?v=7c5d110d">
  <script src="assets/index.js?max_age=1024&amp;v=3fffb693"></script>
</body>
</html>

Options

base
revMode
revType
dateFormat
hashLength
suffix
fileTypes
elementAttributes
patterns
ignorePattern
transformPath
findFile

options.base

type:string
default:file.cwd

set base directory for your assets
<img src='/a/b.png'/> rev will found file in path.join(base, src)
options.cwd is obsoleted, use options.base or set gulp.src(path, {cwd:mycwd}) instead

options.revMode

revMode:['dom'|plain']
default:'plain'

set rev mode, set patterns

more and more unwell-formed documents, it's can't parse to dom-tree or sometime lost/change raw text, so add new parse mode:plain.

options.revType

type:['hash'|date']
default:'hash'

set rev type

example

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({revType:'date'}))
    .pipe(gulp.dest("./dist"))
    
})

<link type="text/css" rel="stylesheet" media="all" 
  href="assets/index.css?max_age=1024">

<link type="text/css" rel="stylesheet" media="all" 
  href="assets/index.css?max_age=1024&amp;v=201503061144">

options.dateFormat

type:string
default:'yyyymmddHHMM'

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({revType:'date', dateFormat:'yymmddHHmm'}))
    .pipe(gulp.dest("./dist"))
    
})

Output

<link type="text/css" rel="stylesheet" media="all" 
  href="assets/index.css?max_age=1024&amp;v=1503061144">

options.hashLength

type:integer
default:8

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({revType:'hash', hashLength:5}))
    .pipe(gulp.dest("./dist"))
    
})

Output

<!--default output-->
<img data-src="assets/audrey-hepburn.jpg" 
  src="assets/audrey-hepburn.jpg?v=7c5d110d">

-->

<img data-src="assets/audrey-hepburn.jpg" 
  src="assets/audrey-hepburn.jpg?v=7c5d1">

options.suffix

type:string
default:v

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({suffix:'hashkey'}))
    .pipe(gulp.dest("./dist"))
    
})

Output

<!--default output-->
<img src="assets/audrey-hepburn.jpg?v=7c5d110d">

-->

<img src="assets/audrey-hepburn.jpg?hashkey=7c5d110d">

options.fileTypes

type:array
default:['js','css','img']

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({fileTypes:['js']}))
    .pipe(gulp.dest("./dist"))
    
})

Output

<!doctype html>
<html lang="en">
<head>
  <title>gulp-rev-easy</title>
  <link type="text/css" rel="stylesheet" media="all" 
    href="assets/index.css?max_age=1024">
</head>
<body>
  <img data-src="assets/audrey-hepburn.jpg"
    src="assets/audrey-hepburn.jpg">
  <script src="assets/index.js?max_age=1024&amp;v=3fffb693"></script>
</body>
</html>

options.elementAttributes (dom mode)


    /*
    how find target element 
     js: {
        name: 'script',
        src: 'src'
      }
      =>
      $('script').attr('src') = newpath
     use other selector in name such as
     {
        name:'.cached',
        src:'src'
      }
    */
    type:object
    default:{
      js: {
        name: 'script',
        src: 'src'
      },
      css: {
        name: 'link[type="text/css"]',
        src: 'href'
      },
      img:{
        name: 'img',
        src : 'src'
      }
    }

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({
        fileTypes:['img1'],
        elementAttributes:{
            img1:{
                name:'img',
                src:'data-src'
            }
        }))
    .pipe(gulp.dest("./dist"))
})

Output

  <!--default out-->
  <img data-src="assets/audrey-hepburn.jpg" 
    src="assets/audrey-hepburn.jpg?v=7c5d110d">

-->

  <img data-src="assets/audrey-hepburn.jpg?v=7c5d110d" 
    src="assets/audrey-hepburn.jpg">

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({
        revMode:'dom',
        fileTypes:['img1'],
        elementAttributes:{
            img1:{
                name:'img',
                src:'data-src'
            }
        }))
    .pipe(gulp.dest("./dist"))
})

options.patterns (plain mode)

type : object
default:
    patterns:{
        js:{
            regex:/(<script[^>]*?\s+src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
        },
        css:{
            regex:/(<link[^>]*?\s+rel=['"]stylesheet['"]?[^>]*?\s+href=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
        },
        img:{
            regex:/(<img[^>]*?\s+src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
        }
    }

return $1 + ['|"] + options.transformPath($2) + $3

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({
            revMode:'plain',
            fileTypes:['img1', 'img'],
            patterns:{
                img1:{
                    regex:/(<img[^>]*?\s+data-src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
                }
            }}))
    .pipe(gulp.dest("./dist"))
})

Output

  <!--default out-->
  <img data-src="assets/audrey-hepburn.jpg"
    src="assets/audrey-hepburn.jpg?v=7c5d110d">

-->

  <img data-src="assets/audrey-hepburn.jpg?v=7c5d110d"
    src="assets/audrey-hepburn.jpg?v=7c5d110d">

options.ignorePattern (plain mode)

type:RegExp
default:/<script\b[^<]*(?:(?!<\/script>)<[^<]*)+<\/script>/gi
ignore rev content,
default will ignore any content in <script type=text\/javascript>..</script>
if you want rev script set to false

gulp.task("reveasy-plain-mode", function (argument) {
	gulp.src("test.html")
		.pipe(reveasy({
			revMode:'plain',
			fileTypes:['img1', 'img', 'css', 'js'],
			ignorePattern:false,
			patterns:{
				img1:{
					regex:/(<img[^>]*?\s+data-src=)("(?:.+?)"|'(?:.+?)')([^>]*?>)/gi
				}
			}}))
		.pipe(gulp.dest("./dist"))
})

In

<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">
<script src="assets/index.js?max_age=1024"></script>
<script type=text/javascript>
  var test2 = '<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">'
</script>
<script type="text/html">
  <img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">
</script>

Out

<!--default  ignore <script type="text/script">..</script> tag -->
<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
<script src="assets/index.js?max_age=1024&v=3fffb693"></script>
<script type=text/javascript>
  var test2 = '<img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg">'
</script>
<script type="text/html">
  <img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
</script>

set to ignorePattern:false

<!-- set to false, rev all -->
<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
<script src="assets/index.js?max_age=1024&v=3fffb693"></script>
<script type=text/javascript>
  var test2 = '<img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">'
</script>
<script type="text/html">
  <img data-src="assets/audrey-hepburn.jpg?v=6a5f96ce" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
</script>

options.transformPath

type:function
default:function(orgPath, ver){}

custom change path

var gulp = require("gulp");
var reveasy = require("gulp-rev-easy");

gulp.task("reveasy", function (argument) {
  gulp.src("test.html")
    .pipe(reveasy({
        transformPath:function(orgpath, ver){
          var newpath = "http://s1.cdn.com/" + orgpath 
                          + (orgpath.indexOf('?') > -1 ? "&" : "?")  
                          + "v=" + ver;
          return newpath;
        }
    }))
    .pipe(gulp.dest("./dist"))
})

Output

  <!--default out-->
  <img data-src="assets/audrey-hepburn.jpg" 
    src="assets/audrey-hepburn.jpg?v=7c5d110d">

-->

<img data-src="assets/audrey-hepburn.jpg"
    src="http://s1.cdn.com/assets/audrey-hepburn.jpg?v=7c5d110d">

options.findFile

type:function
default:
findFile:
    function(src, filepath, options){
        var assertpath = src;
        var srcpath = url.parse(src).pathname;

        if ((/^\/{1}[^\/]+/gi).test(srcpath)) {
            assertpath = path.join(options.base, srcpath);
        } else {
            assertpath = path.join(path.dirname(filepath), srcpath);
        }
        return assertpath;
    }
set custom findFile funciton

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

gulp-rev-easy

Install

Examples

Input

Useage

Output

Options

options.base

options.revMode

options.revType

example

options.dateFormat

Output

options.hashLength

Output

options.suffix

Output

options.fileTypes

Output

options.elementAttributes (dom mode)

Output

options.patterns (plain mode)

Output

options.ignorePattern (plain mode)

In

Out

options.transformPath

Output

options.findFile

Other