Add condition to gulp building process based on html attribute

Question

Is it possible to add a condition such that every img tag in all html files inside my project should have another attribute like my-custom-directive?

I have an angular directive which modifies the base URL of a relative img src URL inside my webapp and I want to prevent me team members from missing this attribute in the html template they write.

Answer 1

You could use gulp-replace to change every tag...

var replace = require('gulp-replace');

gulp.task('pages', function(){
  gulp.src(['*.html'])
    .pipe(replace(/<img/g, '<img my-custom-directive'))
    .pipe(gulp.dest('build'));
});

This would add the attribute to every image. If you want more control, you could use gulp-tap to get the contents of the whole file & process it.

var tap = require('gulp-tap');

gulp.task('pages', function(){
  gulp.src(['*.html'])
  .pipe(tap(function(file) {

  // get current contents
  let contents = file.contents.toString();

  // do your conditional processing
  // eg deal with each tag in a loop & only change those without the attribute
  contents = contents.replace(/<img/g, '<img my-custom-directive'); 

  // set new contents to flow through the gulp stream
  file.contents = new Buffer(contents);
}))
.pipe(gulp.dest('build'));
});