GithubHelp home page GithubHelp logo

gulp-rev-orig's Introduction

gulp-rev-orig (from gulp-rev-easy)

gulp rev for js&css&img path in html without prejudice of other

Install

$ npm install gulp-rev-orig --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>
  <script src="/assets/index.js"></script>
  <script src="/assets/index1.js"></script>
  <script src="http://assets/index.js"></script>
</body>
</html>

Useage

//gulpfile.js
gulp.task('revOrig-default', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig())
        .pipe(gulp.dest('./dist'));
});
gulp revOrig-default

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&v=0a1085be">
</head>
<body>
  <img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
  <script src="assets/index.js?max_age=1024&v=3fffb693"></script>
  <script src="/assets/index.js?v=3fffb693"></script>
  <script src="/assets/index1.js"></script>
  <script src="http://assets/index.js"></script>
</body>
</html>

Options

  • base
  • revType
  • dateFormat
  • hashLength
  • suffix
  • fileTypes
  • elementAttributes
  • transformPath
  • defaultDoAddElementRev
  • elementAttributes.addElementRev
  • createDefaultOptions

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

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

set rev type

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-byDate', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            revType: 'date'
        }))
        .pipe(gulp.dest('./dist'));
});

Output

<!--default output-->
<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&v=201512291737">

options.dateFormat

type:string
default:'yyyymmddHHMM'

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withDateFormat', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            revType: 'date',
            dateFormat: 'yymmddHHmm'
        }))
        .pipe(gulp.dest('./dist'));
});

Output

<!--default output-->
<link type="text/css" rel="stylesheet" media="all"
  href="assets/index.css?max_age=1024&v=201512291712">

-->

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

options.hashLength

type:integer
default:8

example

gulp.task('revOrig-withHashLength', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            revType: 'hash',
            hashLength: 5
        }))
        .pipe(gulp.dest('./dist'));
});

Output

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

-->

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

options.suffix

type:string
default:v

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withHashKey', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            suffix: 'hashkey'
        }))
        .pipe(gulp.dest('./dist'));
});

Output

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

-->

<img src="assets/audrey-hepburn.jpg?hashkey=6a5f96ce">

options.fileTypes

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

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withFileTypes', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            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&v=3fffb693"></script>
  <script src="/assets/index.js?v=3fffb693"></script>
  <script src="/assets/index1.js"></script>
  <script src="http://assets/index.js"></script>
</body>
</html>

options.elementAttributes

/*
how find target element
js: {
    tagRegStr: '(<script [^>]+/?>)',
    pathRegStr: '(?:(\\s+src=")([^"]+)("))'
}
*/
type:object
default:{
    js: {
        tagRegStr: '(<script [^>]+/?>)',
        pathRegStr: '(?:(\\s+src=")([^"]+)("))'
    },
    css: {
        tagRegStr: '(<link [^>]+/?>)',
        pathRegStr: '(?:(\\s+href=")([^"]+)("))'
    },
    img: {
        tagRegStr: '(<img [^>]+/?>)',
        pathRegStr: '(?:(\\s+src=")([^"]+)("))'
    }
}

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withElementAttributes', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            fileTypes: ['img1'],
            elementAttributes: {
                img1: {
                    tagRegStr: '(<img [^>]+/?>)',
                    pathRegStr: '(?:(\\s+data-src=")([^"]+)("))'
                }
            }
        }))
        .pipe(gulp.dest('./dist'));
});

Output

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

-->

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

options.transformPath

type: function
default: function (orgPath, rev) {
    var regStr = '((\\?|\\&|\\&amp\\;)' + options.suffix + '=)([^&\\s]+)';
    var reg = new RegExp(regStr, regOption);
    var newpath = orgPath;
    if (reg.test(orgPath)) {
        newpath = orgPath.replace(reg, '$1' + rev);
    } else {
        newpath += ((orgPath.indexOf('?') > -1 ? '&' : '?') + options.suffix + '=' + rev);
    }
    return newpath;
}

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withTransformPath', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            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=6a5f96ce">

-->

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

options.defaultDoAddElementRev

type: function
default: function (segment, addSrcRev, elementSetting) {
    elementSetting.pathReg.lastIndex = 0;
    var match = elementSetting.pathReg.exec(segment);
    if (match) {
        var src = match[2];
        var revSrc = addSrcRev(src);
        return segment.replace(elementSetting.pathReg, '$1' + revSrc + '$3');
    } else {
        return segment;
    }
}

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withDefaultAddElementRev', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            defaultAddElementRev: function(segment, addSrcRev, elementSetting) {
                elementSetting.pathReg.lastIndex = 0;
                var match = elementSetting.pathReg.exec(segment);
                if (match) {
                    var src = match[2];
                    var revSrc = addSrcRev(src);
                    if (revSrc !== src) {
                        var base = './xxx' + (revSrc[0] === '/' ? '' : '/');
                        return segment.replace(elementSetting.pathReg, '$1' + base + revSrc + '$3');
                    } else {
                        return segment;
                    }
                } else {
                    return segment;
                }
            }
        }))
        .pipe(gulp.dest('./dist'));
});

Output

<!--default out-->
<!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&v=0a1085be">
</head>
<body>
  <img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
  <script src="assets/index.js?max_age=1024&v=3fffb693"></script>
  <script src="/assets/index.js?v=3fffb693"></script>
  <script src="/assets/index1.js"></script>
  <script src="http://assets/index.js"></script>
</body>
</html>

-->

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

options.elementAttributes.addElementRev

type: function
default: use options.defaultDoAddElementRev

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-withDefaultDoAddElementRev', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            defaultDoAddElementRev: function(segment, addSrcRev, elementSetting) {
                elementSetting.pathReg.lastIndex = 0;
                var match = elementSetting.pathReg.exec(segment);
                if (match) {
                    var src = match[2];
                    var revSrc = addSrcRev(src);
                    return segment.replace(elementSetting.pathReg, '$1[' + revSrc + ']$3');
                } else {
                    return segment;
                }
            }
        }))
        .pipe(gulp.dest('./dist'));
});

Output

<!--default out-->
<!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&v=0a1085be">
</head>
<body>
  <img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
  <script src="assets/index.js?max_age=1024&v=3fffb693"></script>
  <script src="/assets/index.js?v=3fffb693"></script>
  <script src="/assets/index1.js"></script>
  <script src="http://assets/index.js"></script>
</body>
</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?v=6a5f96ce]" src="assets/audrey-hepburn.jpg">
  <script src="assets/index.js?max_age=1024&v=3fffb693"></script>
  <script src="/assets/index.js?v=3fffb693"></script>
  <script src="/assets/index1.js"></script>
  <script src="http://assets/index.js"></script>
</body>
</html>

createDefaultOptions

type: function
create default options for template

example

var gulp = require('gulp');
var revOrig = require('gulp-rev-orig');

gulp.task('revOrig-createDefaultOptions', function() {
    var options = revOrig.createDefaultOptions();

    options.elementAttributes.loadJs = {
        tagRegStr: '(<js [^>]+/?>)',
        pathRegStr: '(?:(\\s+src=")([^"]+)("))'
    };

    options.fileTypes.push('loadJs');

    gulp.src('test.html')
        .pipe(revOrig(options))
        .pipe(gulp.dest('./dist'));
});

Input

<!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"
    />
    <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>
    <script src="/assets/index.js"></script>
    <script src="/assets/index1.js"></script>
    <script src="http://assets/index.js"></script>

    <loads style="display: none;">
        <js load="true" src="/assets/index.js"></js>,
        <js load="true" src="/assets/index.js"></js>
        <js load="true" src="/assets/index.js"></js>

        <js load="false" src="/assets/index.js"></js>
        <js load="false" src="/assets/index.js"></js>
        <js load="false" src="/assets/index.js"></js>
    </loads>
</body>

</html>

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&v=0a1085be"
    />
    <link type="text/css" rel="stylesheet" media="all" href="assets/index.css?max_age=1024&v=0a1085be"
    />
</head>

<body>
    <img data-src="assets/audrey-hepburn.jpg" src="assets/audrey-hepburn.jpg?v=6a5f96ce">
    <script src="assets/index.js?max_age=1024&v=3fffb693"></script>
    <script src="/assets/index.js?v=3fffb693"></script>
    <script src="/assets/index1.js"></script>
    <script src="http://assets/index.js"></script>

    <loads style="display: none;">
        <js load="true" src="/assets/index.js?v=3fffb693"></js>,
        <js load="true" src="/assets/index.js?v=3fffb693"></js>
        <js load="true" src="/assets/index.js?v=3fffb693"></js>

        <js load="false" src="/assets/index.js?v=3fffb693"></js>
        <js load="false" src="/assets/index.js?v=3fffb693"></js>
        <js load="false" src="/assets/index.js?v=3fffb693"></js>
    </loads>
</body>

</html>

Other

gulp-rev-orig's People

Contributors

zhangaz1 avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar

Forkers

786320861

gulp-rev-orig's Issues

Multiple CDN script includes will fail the build with 'not found' error

If you import more than 1 script from a CDN, rev will fail on the 2nd one.

Sample html:

<script src="main.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="https://apis.google.com/js/platform2.js"></script>

Running rev against it will get a '/home/platform2.js not found error'. This seems to be triggered by the fact that there are multiple imports in a row. If I add a script import for a local file between those 2 lines, then the file will process fine:

<script src="main.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<script src="main.js"></script>
<script src="https://apis.google.com/js/platform2.js"></script>

as will this (note multiple local files in this example):

<script src="main.js"></script>
<script src="main.js"></script>
<script src="https://apis.google.com/js/platform2.js"></script>

My task is barebones:

gulp.task('client.postprocess_html:dist', () => {
  return gulp.src('./client/dist/*.html')
    .pipe(rev())
    .pipe(gulp.dest('./client/dist/'));
});

Relative path recognition not working

Hi,
There is a problem with recognition if a file is referenced by relative path. Everything works correct for the first file, but if there are multiple files with relative paths in a row, every second file path is treated as absolute path.
Example:

gulp.task('revOrig-withBase', function(argument) {
    gulp.src('test.html')
        .pipe(revOrig({
            base: 'assets/'
        }))
        .pipe(gulp.dest('./dist'));
});

for html file with 2 relative reference paths:

<script src="/../assets/index.js"></script>
<script src="/../assets/index.js"></script>

results an single file not found message, and invalid output:

    <script src="/../assets/index.js?v=3fffb693"></script>
    <script src="/../assets/index.js"></script>

The above can be fixed by removing "g" option from regular expression options in line 13.
var regOption = 'i';

Best regards,

I got a problem

我在vs项目上使用的时候，在添加版本号上之后，页面会出现乱码的情况，最后发现当出现乱码时，编码格式是utf-8（无签名）；而没有乱码时，格式是utf-8（有签名）。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.