C
C
crabicode2015-11-11 21:53:24
gulp.js
crabicode, 2015-11-11 21:53:24

How to setup gulp-rev for html?

I can't figure out how to get gulp to replace links <a href='views/test.html'>in a document?
there is index.html js + css is compressed in it and asset hash is added, but I don’t understand how to force to replace *.html in the same way

gulp.task('client:build', ['haml', 'styles', 'coffee'], function () {
  var jsFilter = $.filter('**/*.js');
  var cssFilter = $.filter('**/*.css');

  var assets = $.useref.assets({searchPath: [yeoman.app, '.tmp']});

  return gulp.src(paths.views.main)
    .pipe(assets)
    .pipe(jsFilter)
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.minifyCss({cache: true}))
    .pipe(cssFilter.restore())
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.revReplace())
    .pipe($.useref())
    .pipe(gulp.dest(yeoman.dist));
});

b2da1e7b8a1b46edb8a76ae9c2ffe1bf
Here's what I get: CSS has a hash, but test.hml
e2f67423af154ff8bef24af1772ee8c1.PNG
seems to be ignored
<link rel="stylesheet" href="styles/main-16c86e6036.css">
<a href="views/test.html">Test</a>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
C
crabicode, 2015-11-13
@crabicode

Everything worked, just step by step it was necessary to break everything

gulp.task 'minify-html', ['rev-html', 'assets'], ->
  gulp.src 'dist/**/*.html'
    .pipe minifyHtml
      conditionals: true
      spare: true
      loose: true
      empty: true
    .pipe gulp.dest yeoman.dist

gulp.task 'rev-html', ['assets'], ->
  gulp.src ['.tmp/views/**/*.html']
    .pipe do $.rev
    .pipe gulp.dest 'dist/views'
    .pipe do $.rev.manifest
    .pipe gulp.dest yeoman.dist

gulp.task 'cache-html', ['rev-html'], ->
  gulp.src ['dist/*.html', 'dist/**/*.js', 'dist/**/*.css']
    .pipe $.revReplace manifest: gulp.src('./dist/rev-manifest.json')
    .pipe gulp.dest yeoman.dist

gulp.task 'assets', ['haml', 'coffee', 'bower'], ->
  assets = $.useref.assets(searchPath: [yeoman.tmp])
  global = gulp.src paths.index
    .pipe assets
      .pipe $.if('*.js', do $.ngAnnotate)
      .pipe $.if('*.js', do $.uglify)
      .pipe $.if('*.css', $.minifyCss cache: true)
      .pipe do $.rev
    .pipe do assets.restore
    .pipe do $.useref
    .pipe do $.revReplace
    .pipe gulp.dest yeoman.dist

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question