README #Usage gulp-useref example outdated

[TueCN]

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'));
});

[TueCN]

Hi,

yes it works for me

.pipe(notIndexFilter)
.pipe(rev())                // Rename the concatenated files
.pipe(notIndexFilter.restore())
.pipe(revReplace())         // Substitute in new filenames
.pipe(gulp.dest('public'));

2016-01-11 5:46 GMT+01:00 fyrebase [email protected]:

Hey @TueCN https://github.com/TueCN did this solution end up working for you? gulp-rev-replace is revving the index.html file for me and not any of the the actual revved files inside index.html

— Reply to this email directly or view it on GitHub https://github.com/jamesknelson/gulp-rev-replace/issues/45#issuecomment-170429925 .

[tkrotoff]

@TueCN jsFilter.restore() should be written jsFilter.restore => see gulp-filter documentation You also need to pass option restore: true.

Example:

import * as gulp from 'gulp';
import * as uglify from 'gulp-uglify';
import * as htmlmin from 'gulp-htmlmin';
import * as csso from 'gulp-csso';
import * as gulpif from 'gulp-if';
import * as rev from 'gulp-rev';
import * as useref from 'gulp-useref';
import * as filter from 'gulp-filter';
import revReplace = require('gulp-rev-replace');
import * as debug from 'gulp-debug';

gulp.task('html', () => {
  const notIndexFilter = filter(['*', '!index.html'], {restore: true});

  return gulp.src('app/index.html')
    .pipe(useref({searchPath: ['.tmp', '.']}))
    .pipe(debug({title: 'useref:'}))
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', csso()))
    .pipe(notIndexFilter)
    .pipe(rev())
    .pipe(notIndexFilter.restore)
    .pipe(revReplace())
    .pipe(gulpif('*.html', htmlmin({removeComments: true, collapseWhitespace: true})))
    .pipe(gulp.dest('dist'))
    .pipe(debug({title: 'html:'}));
});

[TueCN]

@tkrotoff Yes you are right if you are using gulp-filter version 3.x

However I was using gulp-filter version 2.0.2 https://github.com/sindresorhus/gulp-filter/tree/v2.0.2#simple

.. Maybe it's time for me to update :)

[pancasutresna]

Hi.. it works for me as well..

Thank a lot :+1:

[snowman-repos]

@TueCN Thanks so much for this :clap:

[bbodenmiller]

Readme looks good now so this can probably be closed.

[mtpultz]

I'm using your example, as well as referencing yeoman, and I'm having an issue with the file names not being replaced in my html file - https://github.com/jamesknelson/gulp-rev-replace/issues/70. I'm using gulp-filters v4.0 if that maybe makes a difference, as well as gulp-useref v3.1.

UPDATE nvm figured it out.