Gulp -rev with useref renaming index.html file

Question

I am new to using gulp and am trying to create a gulpfile for my project.

My first task is to combine all the script and link tags represented in index.html and replace them with just one tag. To achieve this, I use gulp -useref as shown below.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

This thing simply combines and minimizes all my JS and CSS files and creates one script tag and link for them. All is well up to here.

Now I want to implement hashing for combined JS and CSS files. For this, I use the gulp -rev plugin and gulp -rev-replace plugin, as shown below.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

This also works well, but for one small thing. It creates hashed file names not only for my JS and CSS files, but also for my index.html file as well as below.

, index.html, JS CSS, index.html , index - **** *****. HTML?

.

Answer 1

, , gulpif css/js, rev(). revReplace , css/js.

:

.pipe(gulpif(*.{js,css}, rev()))

:

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(gulpif('*.{js,css}', rev()))
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

Answer 2

, gulp-rev-all gulp-rev, .

( ) - , .

, gulp -task , .

gulp-inject index.html.

1: gulp-rev gulp-rev-all , /dist.

:

gulp.task('rev', function () {

   var css= gulp
      .src(styles)
        .pipe(concat('main.css'))
     .pipe(RevAll.revision())
      .pipe(gulp.dest('dist/css'));

    var js = gulp
        .src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(RevAll.revision())
        .pipe(gulp.dest('dist/js'));

    return merge(css, js); //merge is from the gulp plugin merge-stream.  It allows me to manipulate multiple streams in 1 task instead of having separate tasks.

});

2: gulp-inject, css/js index.html

index.html :

  <!-- inject:css -->
  <!-- endinject -->

<!-- inject:js -->
<!-- endinject -->

3: gulp-inject, index.html

gulp.task('inject',
    function() {
        var jsSource = gulp.src('./dist/js/*.js', { read: false });
        var cssSource = gulp.src('./dist/css/*.css', { read: false });
        return gulp.src('./index.html')
            .pipe(inject(merge(jsSource, cssSource)))
            .pipe(clean({force:true}))
        .pipe(gulp.dest('./'));
    });

index.html dist. , , / .

index.html
--/dist
---/js
---/css
---/views

---

gulp -inject

gulp -rev-all

, , - ,

Answer 3

to try

var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true });

return gulp
    .src('......')
    .pipe('......')
    .pipe('......')
    .pipe(ignoreIndexHtml)
    .pipe($.rev())    
    .pipe(ignoreIndexHtml.restore)    
    .pipe($.revReplace())
    .pipe(gulp.dest('......'));