gulp-html-src-suffix

Gulp plugin for adding suffixes to HTML resources

Install

npm i -D gulp-html-src-suffix

Main features

• Works with formatted tags (no need to write tag in one line).
• Ignores commented tags, existing picture tags, tags with empty or incorrect src attribute value.

Examples:

Basic

src/index.html

<img
  src="./img/image-placeholder.jpg"
  alt="image placeholder"
/>
<link rel="stylesheet" href="./resf.css">
<script src="./test.js"></script>

dist/index.html

<img
    src="./img/image-placeholder.jpg?v=sdf54dfs"
    alt="image placeholder"
  />
  <link rel="stylesheet" href="./resf.css?v=bkpwag6d">
<script src="./test.js?v=kNPZQkXy"></script>

Gulpfile

src/gulpfile.js

import gulpHtmlSrcSuffix from 'gulp-html-src-suffix';
/*
 * or
 * const gulpHtmlImgWrapper = require('gulp-html-src-suffix');
 */

gulp.task('html', function () {
  gulp
    .src('./src/*.html')
    .pipe(
      gulpHtmlSrcSuffix()
    )
    .pipe(gulp.dest('./dest/'));
});