jamesknelson / gulp-rev-replace Goto Github PK

the rev-manifest.json file:

the generating file, replacement not work:

gulp-util has been recently deprecated. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util.

The README.md lists alternatives for all the components so a simple replacement should be enough.

Your package is one of the most popular packages still relying on gulp-util, it would be good to publish a fixed version to npm as soon as possible.

See:

• https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
• gulpjs/gulp-util#143

Hi all.

As you've probably noticed, I'm not taking as much care of this project as I could be. I don't use this project in any of my own builds anymore, and I honestly don't understand the ecosystem well enough to judge whether to accept the Pull Requests I'm receiving.

Would anyone be interested in taking over maintenance for this project?

When using gulp-useref to combine files if you put the combined file in a subdirectory, gulp-rev will rename the files and they will be placed in the subdirectory but gulp-rev-replace will not replace the file names in the HTML file.

This will work:

<!-- build:css normalize.css -->
  <link rel="stylesheet" href="css/normalize.css">
<!-- endbuild -->

But this will not:

<!-- build:css css/style.css -->
  <link rel="stylesheet" href="css/style.css">
<!-- endbuild -->

The final HTML produced would look like this:

<link rel="stylesheet" href="normalize-66961048.css"/>
<link rel="stylesheet" href="css/style.css"/>

It used to work with version 2, updated to version 3, updated the task, The task i.e.

gulp.task('minify:dashboard', ['inject:dashboard'], function() {
  var assets;

  return gulp.src(paths.django.templates.root + '/__dashboard.html')
    .pipe($.replace('script src="{{ STATIC_URL }}dashboard', 'script src="compile'))

    .pipe($.useref({
      searchPath: '.'
    }))

    // versioning assets
    .pipe(indexHtmlFilter)
      .pipe($.buffer())
      .pipe($.rev())
      .pipe($.debug())
      .pipe(indexHtmlFilter.restore)

    // processing scripts
    .pipe(jsFilter)
      // .pipe($.uglify({
      //   preserveComments: $.uglifySaveLicense,
      //   compress: uglifyCompressOptions
      // }))
      .pipe($.size())
      .pipe(gulp.dest(paths.django.assets.dashboard + '/builds'))
      .pipe(jsFilter.restore)

    // updating references
    .pipe($.revReplace())
    // adding django static url reference
    .pipe($.replace('src="scripts', 'src="{{ STATIC_URL }}dashboard/builds/scripts'))
    .pipe(gulp.dest('compile/builds'));
});

This tasks works fine on its own, e.g.

gulp minify:dashboard

however, when i introduce a new task

gulp.task('minify', ['minify:common', 'minify:dashboard']);

the above task gulp minify gives me this

events.js:154
      throw er; // Unhandled 'error' event
      ^
Error: write after end
    at writeAfterEnd (/magneto/dashboard/node_modules/readable-stream/lib/_stream_writable.js:203:12)
    at StreamFilter.Writable.write (/magneto/dashboard/node_modules/readable-stream/lib/_stream_writable.js:239:20)
    at write (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at emitNone (events.js:80:13)
    at DestroyableTransform.emit (events.js:179:7)
    at emitReadable_ (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/magneto/dashboard/node_modules/gulp-useref/node_modules/readable-stream/lib/_stream_readable.js:187:9)

the strange thing, i remove all the filters, i.e.

gulp.task('minify:dashboard', ['inject:dashboard'], function() {
  var assets;

  return gulp.src(paths.django.templates.root + '/__dashboard.html')
    .pipe($.replace('script src="{{ STATIC_URL }}dashboard', 'script src="compile'))

    .pipe($.useref({
      searchPath: '.'
    }))

    // versioning assets
    //.pipe(indexHtmlFilter)
      .pipe($.rev())
      .pipe($.debug())
      //.pipe(indexHtmlFilter.restore)

    // processing scripts
    //.pipe(jsFilter)
      // .pipe($.uglify({
      //   preserveComments: $.uglifySaveLicense,
      //   compress: uglifyCompressOptions
      // }))
      //.pipe($.size())
      //.pipe(gulp.dest(paths.django.assets.dashboard + '/builds'))
      //.pipe(jsFilter.restore)

    // updating references
    .pipe($.revReplace())
    // adding django static url reference
    .pipe($.replace('src="scripts', 'src="{{ STATIC_URL }}dashboard/builds/scripts'))
    .pipe(gulp.dest('compile/builds'));
});

then the task gulp minify works perfectly fine. Is it something wrong with gulp-filter package, or am i using it wrong?

This may be more of a useref question but I believe you might be able to answer it. My code, similar to the example on the main page, properly generates concatted/minified:

styles/vendor.css 
scripts/vendor.js
index.html

in my dist directory, but now what?

Do I now need to change my app to use, by default, dist/index.html vs the regular index.html in my home directory? This would be fine, but then it can't seem to find the vendor.js or vendor.css unless I change the html base tag from

<base href="/" />
To:

<base href="/dist" />

This seems to screw up the other paths/URLs in my angular app, for instance redirecting my home page to:

localhost:8080/dist/posts

instead of:

localhost:8080/posts

Overall I'm just confused by the usage.

Here is the relevant part of my gulpfile, for what it's worth:

var bases = {
 app: 'app/',
 dist: ['src/main/webapp/dist']
};

gulp.task('clean', function() {
 return gulp.src(bases.dist)
 .pipe(clean());
});

gulp.task("prodBuild", ['clean'], function() {
  var jsFilter = filter(paths.scripts, { restore: true });
  var cssFilter = filter(paths.styles, { restore: true });
  var indexHtmlFilter = filter(['**/*'], { restore: true });

  return gulp.src(['src/main/webapp/index.html'])
    .pipe(useref())
    .pipe(jsFilter)
    .pipe(uglify())      // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())         // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(indexHtmlFilter)
    .pipe(rev())                // Rename the concatenated files (but not index.html)
    .pipe(indexHtmlFilter.restore)
    .pipe(gulp.dest('src/main/webapp/dist'));
});

Getting a false positive in a bundled js file for an external library that contains

document.documentElement.style.cssFloat

style.css is replaced with the rev'd string from the manifest, invalidating the bundle.

Hi,

Is there an easy way to prevent rev-replace replacing inline sourcemap references?
This:

/*# sourceMappingURL=style.css.map */

Becomes this:

/*# sourceMappingURL=style-g623af6a92.css.map */

I'd even say this is a bug since it matches something.css inside of something.css.map, which is wrong since that's not an occurence of something.css.

Lets say you have files named

1. foo
2. foo-bar
   And you replace them with
3. foo-123
4. foo-bar-456

File (2) will be replaced twice and the result is
foo-123-bar-456

Hello,

I try to figure how use gulp-rev with gulp-rev-replace together. I'm not using gulp-useref.
Is it possible to use it alone ?

thanks

Hi, I'm using gulp-rev-replace for a while and it's fine, until I decide replace "plain html" with template. I found gulp-rev-replace can not replace path in jade, then I read doc and issues and got nothing useful. Does anyone has some advices?

Why would that happen?

gulp.task('injectfiles',
    ['js', 'vendorjs', 'css', 'vendorcss'], function () { // these tasks create the minified 4 css and js files
    log('Building index.html to stage');

    var minified = pkg.paths.stage + '**/*.min.*';
    var index = pkg.paths.client + 'index.html';

    var minFilter = plug.filter(['**/*.min.*', '!**/*.map']);
    var indexFilter = plug.filter(['index.html']);

    return gulp
        .src([].concat(minified, index)) // add all staged min files and index.html
        .pipe(minFilter) // filter the stream to minified css and js
        .pipe(plug.rev()) // create files with rev's
        .pipe(gulp.dest(pkg.paths.stage)) // write the rev files
// if we create and write rev.manifest here, replace doesn't happen.
        .pipe(minFilter.restore()) // remove filter, back to original stream
        .pipe(indexFilter) // filter to index.html
        .pipe(inject('content/vendor.min.css', 'inject-vendor'))
        .pipe(inject('content/all.min.css'))
        .pipe(inject('vendor/vendor.min.js', 'inject-vendor'))
        .pipe(inject('all.min.js'))
        .pipe(indexFilter.restore()) // remove filter, back to original stream
        .pipe(plug.revReplace())         // Substitute in new filenames
        .pipe(gulp.dest(pkg.paths.stage)) // write the index.html file changes
        .pipe(plug.rev.manifest()) // create the manifest (must happen last or we screw up the injection)
        .pipe(gulp.dest(pkg.paths.stage)); // write the manifest

    function inject(path, name) {
        var glob = pkg.paths.stage + path
        var options = {
            ignorePath: pkg.paths.stage.substring(1),
            read: false
        };
        if (name) { options.name = name; }
        return plug.inject(gulp.src(glob), options);
    }
});

I'm wondering how to get gulp-rev-replace to replace file references with the same hash across multiple html files. Considering the following:

• index.html
• subfolder
  • index.html
• scripts
  • main.js
• styles
  • main.scss

And the following html statements:

index.html:

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

subfolder/index.html:

    <!-- build:css ../styles/main.css -->
    <link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="../styles/main.css">
    <!-- endbuild -->

And the following in my Gulpfile

gulp.task('html', ['styles'], () => {
  const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});

  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
    .pipe(gulp.dest('dist'));
});

index.html will get replaced with the correct styles and scripts reference, while subfolder/index.html will get an entirely new hash.

Am I setting up my Gulpfile incorrectly?

I'm running gulp-rev-all and then gulp-rev-replace, gulp-rev-replace changes the already revved files, but keeps the same hash (I don't know if that's the correct behaviour).

Should gulp-rev-replace rehash the file?, if that's expected, is there anything I can do to get it working?

Thanks!

The task shown below fails to replace the not-yet-revved references in my index.html file. Other than that is is working perfectly. I have tried so many different approaches at this point that I'm considering abandoning this package. The only way I can get it to work is to remove my filters and allow it to write all of CSS and JS files to the root path where the index.html file resides. Any ideas?

gulp.task('assets-revision', ['analyze', 'clean', 'assets-fonts', 'assets-other'], function() {
    var jsFilter = plugins.filter('**/*.js', { restore: true });
    var cssFilter = plugins.filter('**/*.css', { restore: true });

    return gulp.src([
        config.build + '/index.html',
        config.build + '/css/**/*.css',
        config.build + '/js/**/*.js'
    ])

    .pipe(plugins.rev())

    .pipe(jsFilter)
    .pipe(gulp.dest(config.build + '/css/'))
    .pipe(jsFilter.restore)

    .pipe(cssFilter)
    .pipe(gulp.dest(config.build + '/js/'))
    .pipe(cssFilter.restore)

    .pipe(plugins.revReplace());
});

gulp task:

`gulp.task('rev-update-references', function(){
const manifest = gulp.src(getBuildRoot() + '/' + config.tasks.production.manifest)

return gulp.src(path.join(getBuildRoot() + '//.{css,js,json}'))
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(getBuildRoot()))
})`

scss:

`@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-weight: 400;
src: url(sourcesanspro-regular-webfont.woff) format("woff"),
url(sourcesanspro-regular-webfont.woff2) format("woff2")
}

body {
font-family: "Source Sans Pro";
}`

resulting css:

`@font-face {
font-family: Source Sans Pro;
font-style: normal;
font-weight: 400;
src: url(sourcesanspro-regular-webfont.woff?v=5a29a8b022) format("woff"),
url(sourcesanspro-regular-webfont.woff?v=5a29a8b0222?v=84061ed321) format("woff2")
}

body {
font-family: Source Sans Pro
}`

Problem: inside the compiled CSS the .woff2 filename is truncating the "2" in the extension, plus appending an extra (unknown) hash.

Has anyone faced a similar issue? Or can anyone confirm if woff2 is being rev'd correctly inside their referenced CSS?

var rev = require("gulp-rev");
var addsrc = require('gulp-add-src');
var revReplace = require("gulp-rev-replace");
gulp.task("revision", ["dist:css", "dist:js"], function(){
  return gulp.src(["dist/**/*.css", "dist/**/*.js"])
    .pipe(rev())
    .pipe(addsrc('./*.html'))
    .pipe(revReplace())
    .pipe(gulp.dest(opt.distFolder))
});

It is more simple.

Now rev-replace can't replace URI-encoded file name including non-ascii characters such that: %e6%97%a5%e6%9c%ac%e8%aa%9e.jpg

Hi

I am trying to upgrade gulp-useref to 3.x.x where they have removed the assets function.
See https://github.com/jonkemp/gulp-useref#migration-from-v2-api

I am trying to maintain a pipeline with gulp-filter, gulp-useref, gulp-rev, and gulp-rev-replace like in your Usage example, but I am not quite sure how to proceed without the assets function.

Can anyone help suggest how to make these plugins work together and in the process we can hopefully get the README updated.

Proposed fix:
I ended up with the following - a bit clumsy - but it works!
If anyone can simplify it please be my guest.
Also - I also show how to generate source maps

var lazypipe = require('lazypipe');
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var sourcemaps = require('gulp-sourcemaps')
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');

gulp.task("index", function() {
  var jsFilter = filter("**/*.js");
  var cssFilter = filter("**/*.css");
  var notIndexFilter = filter(['**/*', '!**/index.html']);

  return gulp.src("src/index.html")
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
    .pipe(jsFilter)
    .pipe(uglify())             // Minify any javascript sources
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(csso())               // Minify any CSS sources
    .pipe(cssFilter.restore())
    .pipe(notIndexFilter)
    .pipe(rev())                // Rename the concatenated files
    .pipe(notIndexFilter.restore())
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('public'));
});

This won't work for html.erb?

index.html.erb

rev-replace will replace original

<script> x.js</script>

with

<script>x.somehash.map</script>

Here is my gulp task:

    .pipe(useref())
    .pipe(jsFilter)
    .pipe(sourcemaps.init())
    .pipe(ngAnnotate())
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe(rev())
    .pipe(sourcemaps.write('maps'))
    .pipe(jsFilter.restore)
    .pipe(revReplace())

// Rewrite references to file names which have been renamed by gulp-rev-all
gulp.task('fingerprintReplace', ['fingerprintGenerate'], () => {

  if (config.production) {

    // We only need file name without directories
    const stripDirectories = function (filename) {
      return filename.split('/').slice(0).pop();
    };


    return gulp.src([config.folder.build + '**/*', '!' + config.folder.build + 'rev-manifest.json'])      
      .pipe(revReplace({
        manifest: gulp.src(config.folder.build + 'rev-manifest.json'),
        modifyUnreved: stripDirectories,
        modifyReved: stripDirectories
      }))
      .pipe(gulp.dest(config.folder.build))
      .pipe(size({
        title: 'dist size'
      }));
  }

});

Print 01 - Console Errors
Print 02 - Manifest.json

Obs: Only occurs in some files

Hi,

options.replaceInExtensions Type: Array Default: ['.js', '.css', '.html', '.hbs']

For this, would this option support .json and .xml?
I add it to my gulp-rev code, every types list on the doc is working fine, except .json and .xml, all the revision images are not updating within the .json and .xml.

issue related to: https://github.com/sindresorhus/gulp-rev/issues/214

thanks!

Using rev-replace with rev.manifest seems to prevent replacement of the revisioned files.

gulp.task('build', [
    'sass',
    'inject-loader',
    'inject-scripts',
    'inject-templates',
    'inject-library-scripts',
    'inject-library-styles'
], function () {

    helpers.log('Build Application');

    var masterFile = path.join(config.viewPath, config.master);
    var assets = $.useref({
        searchPath: ['public']
    });

    var publicBuildFolder = path.join(config.publicPath, '/build');
    var viewBuildFolder = path.join(config.viewPath, '/build');

    // Clean out the previous build
    helpers.clean([
        path.join(publicBuildFolder, '**/*'),
        path.join(viewBuildFolder, '**/*')
    ]);

    var filterAssets = $.filter([
        '**/app.js',
        '**/lib.css',
        '!**/master.blade.php'
    ], {restore: true});

    var filterHtml = $.filter([
        '**/master.blade.php'
    ], {restore: true});

    // Process and replace with new build
    // Process and replace with new build
    return gulp.src(masterFile)
               .pipe(assets)
               .pipe($.plumber())

               .pipe(filterAssets)
               .pipe($.rev())
               .pipe(gulp.dest(config.publicPath))
               // .pipe($.rev.manifest())
               // .pipe(gulp.dest(publicBuildFolder))
               .pipe(filterAssets.restore)

               .pipe(args.verbose ? $.print() : $.util.noop())

               .pipe($.revReplace({
                   replaceInExtensions: ['.php']
               }))
               // .pipe($.revReplace({
               //     replaceInExtensions: ['.php'],
               //     manifest: gulp.src(publicBuildFolder + 'rev-manifest.json')
               // }))

               .pipe(filterHtml)

               .pipe(gulp.dest(viewBuildFolder));
});

Original template in /views/master.blade.php

<!-- Vendor Scripts -->
<!-- build:js /build/js/app.js -->

<!-- removed scripts for brevity -->

<!-- endbuild -->

Output in /views/build/master.blade.php

<script src="/build/js/app.js"></script>

Should be:

<script src="/build/js/app-01ab31dk.js"></script>

I'm trying to exclude my index.html out of the version renaming, meaning, it becomes index-12ljn123j1n23.html, I need to remain as index.html

Any options to handle this?

Seems there is a problem with the gulp-rev-replace.

See the file https://github.com/igorlino/gulp-patterns/blob/master/gulpfile.js

it essentially has the same workflow as in the usage page of gulp-rev-replace. The only difference is that sourcemaps have been enabled, which then means a reference sourceMappingURL tag has been created inside the original css and js files to generated sourcemaps files in the same directory.
As the sourcemap files are a derivate of the original filename, only appending a posfix extension. It looks quite similar.

To reproduce:
-Clone project.
-npm install
-gulp build
-Open ./build/styles/ directory
-Open the *.css files and at the very end of the files you see the sourcemap (sourceMappingURL) reference has wrongly been replaced.

At first I assume that this was what the function did:

    .pipe(through.obj(function(file, enc, cb) {
      file.path = file.revOrigPath
      cb(null, file)
    }))

However it doesn't do that it seems, but this would be a cool package to have! gulp-rev-undo or something haha.

Hi! Can we update the README or a doc page with how to use this with gulp-useref@3 ?

After 2 hours I have found an example here!
https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/asset-revisioning.md

Taking some ideas from: gulp-asset which combines a bunch of things into one...

1. Prefix's for searched terms
   match all starting with the scheme asset (could just be a string for simplicity)
   e.g. asset://myspecial/images/file.png
   I could see this potentially being abused instead of using gulp-rename ... so maybe just have the scheme option?
2. Prefix set for replaced terms (e.g. content delivery networks)
   from: asset://myspecial/images/file.png
   to: http://mycdn.website.com/myspecial/images/file.png
3. Read rev'd files from manifest as an option;
   this is better then using gulp-rev-collector or gulp-clone in my opinion.
4. Detection of unfound files (this should be an option, potentially a regex); warnings? vs. errors?
   if it matches the scheme, but the file is not rev'd, and it is is not in the "excluded" set of local files.
   or something of that nature. (might have to think this one through a bit more).

I would be willing to implement them; just curious what people think about them that use this library etc. Should it be included in this library? if not, is there any library? ...

So it turns out that without the replaceInExtensions option, replacements won't work. I had to put that in to get replacements to work. A suggestion for updated documentation would be

gulp.task("revreplace", ["revision"], function(){
  var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");

  return gulp.src(opt.srcFolder + "/index.html")
    .pipe(revReplace({manifest: manifest, replaceInExtensions: ['.html']}))
    .pipe(gulp.dest(opt.distFolder));
});

Hey,

I am a happy user of your library, but as my project grows we have a lot of dependencies.
We could save a lot of space if you added .npmignore file to your project.

I even found tool that can help you with it: https://github.com/inikulin/dmn

Thanks!

Just as it says, if I use the example given, it creates the rev, writes the manifest, but does not change the html file until i run the tasks again. I tried to add a wait task in there with no luck. I have a very minute theory that virus scan is reading the manifest file and the task cannot read it so I run this as two new tasks and that is just enough time.

gulp.task("step1", function () {
gulp.src('./src/assets/css/global.css')
.pipe(gulp.dest('./web/assets/css'))
.pipe(rev())
.pipe(gulp.dest('./web/assets/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./web/assets/css'))
.pipe(wait(5000))
});

gulp.task("step2", function(){
var manifest = gulp.src("./web/assets/css/rev-manifest.json");
return gulp.src("./src/index.html")
.pipe(wait(5000))
.pipe(revReplace({manifest: manifest}))
.pipe(wait(5000))
.pipe(gulp.dest("./web/"));
});

Due to caching of files (and their contents) it has to contain the entire streams of all the files that will need to be replaced; This results sometimes in building up a large amount of memory which sometimes makes the process quit for stack-overflow style reasons.

I am not sure if there is a good way to fix this (considering you would need all rev'd stream separate from the replacement stream; just an idea though).

Maybe gulp-rev-replace should take two streams as input, and product the modified streams as output instead? or support both?

I am pretty green when it comes to using Gulp, and I am trying to implement some cache-busting into an application using the gulp-rev-replace plugin along with gulp-rev. I can get the files to be renamed with a hash, and I am able to generate a rev-manifest.json file, but I am stuck with the replacing part.

What is throwing me for a loop specifically is this:

gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");

return gulp.src(opt.srcFolder + "/index.html")
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(opt.distFolder));
});

What is it referring to specifically when you called .pipe(revReplace({manifest: manifest}))????

Hi,

I am working on updating minified file references in html files but the replacement part is not working - although min file and manifest file generation is working fine along with html page copy to output directory.

I am working with gulp-rev-replace without gulp-useref and using the same code provided in ReadMe:

`var rev = require("gulp-rev");
var revReplace = require("gulp-rev-replace");
gulp.task("revision", ["dist:css", "dist:js"], function(){
return gulp.src(["dist//*.css", "dist//*.js"])
.pipe(rev())
.pipe(gulp.dest(opt.distFolder))
.pipe(rev.manifest())
.pipe(gulp.dest(opt.distFolder))
})

gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");

return gulp.src(opt.srcFolder + "/index.html")
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest(opt.distFolder));
});`

Here is the snapshot showing the output of the process where min file name is not replaced in the html page:

Any help?

gulp-rev-replace doesn't seem to be accepting .json files, even when adding 'json' to the replaceInExtensions options. This is to support versioning of pwa manifest.json files.

Paths check out (via console)
see my gulp task below.

gulp.task('revReplaceManifest', function() {
  
  console.log('REV Manifest: ', `${paths.dist}/${paths.client.revManifest}`);
  console.log('PWA Manifest: ', 'dist/client/manifest.json');

  return gulp.src('dist/client/manifest.json')
      .pipe(plugins.revReplace({
        replaceInExtensions: ['.json'],
        manifest: gulp.src(`${paths.dist}/${paths.client.revManifest}`)
      }))
      .pipe(gulp.dest('dist/client'));
});

md5.json

a.js: a-abcdefg.js

This covers the original file

return gulp.src('**/*.php')
                    .pipe(revReplace({
                        manifest: manifest,
                        replaceInExtensions: ['.php', '.jsp']
                    }))
                    .pipe(gulp.dest('./')); // This covers the original file

After replacement,

index.php

<script src="a-abcdefg.js"></script>

ok, this is no problem.but i change the md5.json like this:

md5.json

a.js: a-xxxxx.js

After replacement,

index.php

<script src="a-abcdefg.js"></script>

Not replaced, because md5.json has not 'a-abcdefg.js' in the ‘key’。

One way is to retain the original file

return gulp.src('**/*.php')
                    .pipe(revReplace({
                        manifest: manifest,
                        replaceInExtensions: ['.php', '.jsp']
                    }))
                    .pipe(gulp.dest('./build')); // retain the original file, output different directory

If I want to cover the original file, Is there a way to solve it or path matching rules under which files?

Not choose right rev file when two same build name

two htmls A and B with save build name, my result is A will use its vender-xxx.css and B's vender-xxx.js, but B will use its vender-xx.js and A's vender-xx.css,
It seems the rev-replace not working well, Can we use the same build name ?

It seems the example given in the readme only works once, because the reference in the file changes, and can no longer be found on subsequent updates of the manifest.

gulp.task("revreplace", ["revision"], function(){
  var manifest = gulp.src("./" + opt.distFolder + "/rev-manifest.json");

  return gulp.src(opt.distFolder + "/index.html")
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest(opt.distFolder));
});

It might be possible to look for old revision references using some regex, but not sure if this would be the best approach if the revision scheme can be changed.

var re = new RegExp(origFileName + "-[a-f0-9]{8}\." + origFileExtension, "g");

Any ideas on how to resolve in-place revision replacement, or whether this should be an update?

Hello, I'm using this code, and basically the main.css is a .less file compiled, but also if I generate it in
/src and get it useref(), the code gets executed before the .css is generated, and it gives an error. If I put an empty main.css it gets compiled before the preprocessor.
Any way to to it? thanks

<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
<!-- build:js js/main.js -->
<script type="text/javascript" src="js/main.js"></script>
<!-- endbuild -->

// Concatenate & Minify JS
gulp.task('js', function() {
    gulp.src(src + 'js/**/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest(dest + 'js'))
        .pipe(gulp.dest(src+ 'js'));
        .pipe(rename('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest + 'js'));
        .pipe(gulp.dest(src+ 'js'));
});

// Compile Less
gulp.task('less', function() {
    gulp.src(src + 'less/**/*.less')
        .pipe(less())
        .pipe(concat('main.css'))
        .pipe(gulp.dest(dest + 'css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(dest + 'css'));
});

// Html Injects
gulp.task('html', function() {
    var assets = useref.assets();
    var jsFilter = filter(src + 'js/**/*.js');
    var cssFilter = filter(src + 'css/**/*.css');
    gulp.src(src + "**/*.html")
        .pipe(assets)
        // js
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(gulp.dest(dest + 'css'))
        .pipe(jsFilter.restore())
        // css
        .pipe(cssFilter)
        .pipe(less())
        .pipe(minifycss())
        .pipe(gulp.dest(dest + 'css'))
        .pipe(cssFilter.restore())
        // rev
        .pipe(rev())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(revReplace())
        // dest
        .pipe(embedlr())
        .pipe(gulp.dest(dest));
});

The gulp-rev only creates a rev name how do i output the files ?

in my project,my url is like ../commom/pubfun ，but use gulp-rev product url name like common/pubfun.js .so i want to change it to common/pubfun ...could you help me？

I think that should provide file information to modifyUnreved and modifyReved method.

https://github.com/jamesknelson/gulp-rev-replace/blob/master/index.js#L82

if the css image use the relative path, may have the same url string, so provide the file information to compare with each other.

I am having an issue where I need the HTML5 outputted to be valid XML so I wish to keep the self closing tag in my link.

I am using useref pretty much exactly as described in the README

I start with this:

        <!-- build:css styles/app.css -->
        <link rel="stylesheet" href="styles/index.css" />
        <!-- endbuild -->

I am ending up with this:

        <link rel="stylesheet" href="styles/app-9bd342b9b3.css">

Now this would be perfect if it did not strip the self closing tag. What I want is this:

 <link rel="stylesheet" href="styles/app-9bd342b9b3.css"/>

I confirmed its the revreplace and not useref that is doing this. As a matter of fact according to their examples useref will actually add in the self closing tag if its missing.

Can you tell me how I can fix this issue please?

In Spring MVC application I have a set of script tags that in src attribute have a variable that drives which file version is used: <%=jsSuffix%> - it is set using application configuration settings during the runtime (long story but I think it has to stay this way):

<script src="build/js/app-vendor<%=jsSuffix%>.js "></script>
<script src="build/js/app-gom<%=jsSuffix%>.js "></script>
<script src="build/js/app<%=jsSuffix%>.js "></script>

Unfortunately gulp-rev & gulp-rev-replace does not match this syntax with physical file names (app-vendor.js and app-vendor.min.js).

Can this be achieved?

I'm looking to replace the CSS and JS references in my header and footer PHP files.

They located at src/app/templates/boolean/header.php and src/app/templates/boolean/footer.php

Is there a way to easily fit them into my assets task below?

'use strict';
const argv = require('yargs').argv;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const concat = require('gulp-concat');
const cssnano = require('gulp-cssnano');
const gulp = require('gulp');
const gzip = require('gulp-gzip');
const newer = require('gulp-newer');
const phplint = require('phplint').lint
const phpMinify = require('gulp-php-minify');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const rev = require('gulp-rev');
const revreplace = require('gulp-rev-replace');
const sass = require('gulp-sass');
const size = require('gulp-size');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const when = require('gulp-if');


// 'gulp scripts' -- creates a app.js file from your JavaScript files and
// creates a Sourcemap for it
// 'gulp scripts --prod' -- creates a app.js file from your JavaScript files,
// minifies, gzips and cache busts it. Does not create a Sourcemap
gulp.task('scripts', () =>
  // NOTE: The order here is important since it's concatenated in order from
  // top to bottom, so you want vendor scripts etc on top
  gulp.src([
    'src/app/assets/javascript/test.js'
  ])
    .pipe(newer('.tmp/app/assets/javascript/app.js', {dest: '.tmp/app/assets/javascript', ext: '.js'}))
    .pipe(when(!argv.prod, sourcemaps.init()))
    .pipe(concat('app.js'))
    .pipe(size({
      showFiles: true
    }))
    .pipe(when(argv.prod, rename({suffix: '.min'})))
    .pipe(when(argv.prod, when('*.js', uglify({preserveComments: 'some'}))))
    .pipe(when(argv.prod, size({
      showFiles: true
    })))
    .pipe(when(argv.prod, rev()))
    .pipe(when(argv.prod, revreplace({
      replaceInExtensions: ['.php']
    })))
    .pipe(when(!argv.prod, sourcemaps.write('.')))
    .pipe(when(argv.prod, gulp.dest('.tmp/app/assets/javascript')))
    .pipe(when(argv.prod, when('*.js', gzip({append: true}))))
    .pipe(when(argv.prod, size({
      gzip: true,
      showFiles: true
    })))
    .pipe(gulp.dest('.tmp/app/assets/javascript/'))
);

// Styles
gulp.task('styles', function () {
  return gulp.src('src/app/assets/scss/style.scss')
    .pipe(when(!argv.prod, sourcemaps.init()))
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([
      autoprefixer({browsers: 'last 2 versions'})
    ]))
    .pipe(size({
      showFiles: true
    }))
    .pipe(when(argv.prod, rename({suffix: '.min'})))
    .pipe(when(argv.prod, when('*.css', cssnano({autoprefixer: false}))))
    .pipe(when(argv.prod, size({
      showFiles: true
    })))
    .pipe(when(argv.prod, rev()))
    .pipe(when(!argv.prod, sourcemaps.write('.')))
    .pipe(when(argv.prod, gulp.dest('.tmp/app/assets/stylesheets')))
    .pipe(when(argv.prod, when('*.css', gzip({append: true}))))
    .pipe(when(argv.prod, size({
      gzip: true,
      showFiles: true
    })))
    .pipe(gulp.dest('.tmp/app/assets/stylesheets'))
    .pipe(when(!argv.prod, browserSync.stream()))
});

// PHP
gulp.task('phplint', function (cb) {
  phplint(['src/**/*.php'], {limit: 10}, function (err, stdout, stderr) {
    if (err) {
      cb(err)
      process.exit(1)
    }
    cb()
  })
})

// PHP minify
gulp.task('phpminify', () =>
  gulp.src('src/**/*.php', {read: false})
    .pipe(when(argv.prod, phpMinify()))
    .pipe(gulp.dest('.tmp'))
);

Hi,

Is it possible to use rev-replace on the same stream as rev without useref?

Doing this fails:

gulp.src(ASSETS_GLOB)
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(DIST_FOLDER));

Because index.html isn't in ASSETS_GLOB.

Adding it to ASSETS_GLOB will make rev-replace revision the HTML file as well, so also bad.

Hi,

My revreplace task is ::-

gulp.task("revreplace", ["revision"], function(){
var manifest = gulp.src("web/public/assets/javascript-build/rev-manifest.json");

return gulp.src("src/Webmuch/HomeBundle/Resources/views/Index/index.html.twig")
.pipe(debug({title: 'unicorn:'}))
.pipe(revReplace({manifest: manifest,replaceInExtensions: ['.html.twig']}))
.pipe(gulp.dest("web/public/assets/javascript-build"));
});

when i work with .html files, it replaces the script tags correctly, but not in .html.twig files . How to achieve that ?

README.md:

var revReplace = require("gulp-replace");

should be:

var revReplace = require("gulp-rev-replace");