既存のhtmlページにhtmlコードを追加するタスクをグループ

Question

私は基本的に小さなHTMLコードをアプリケーションのすべての既存のhtmlファイルの前に付加するgulpタスクを作成する際に問題に直面しています。 これはアプリケーション全体で複数のhtmlファイル間で同じである

<div class="input-field-group"> 
    <span class="error-validation"> 
     <small class="inline-error"> 
      <span>This field is required</span> 
     </small> 
     <small class="inline-error"> 
      <span>This field is required</span> 
     </small> 
     <small class="inline-error"> 
      <span>This field is required</span> 
     </small> 
    </span> 
</div> 

のようなので、私の既存のHTMLに見えます。私が前に追加したいのは、アプリケーション全体のすべてのhtmlファイルのエラーメッセージのすぐ上にあるもう一つのスパン要素です。

<div class="input-field-group"> 
    <span class="error-validation"> 
     <small class="inline-error"> 
      ***<span aria-hidden="true" class="error-icon"></span>*** 
      <span>This field is required</span> 
     </small> 
     <small class="inline-error"> 
      ***<span aria-hidden="true" class="error-icon"></span>*** 
      <span>This field is required</span> 
     </small> 
     <small class="inline-error"> 
      ***<span aria-hidden="true" class="error-icon"></span>*** 
      <span>This field is required</span> 
     </small> 
    </span> 
</div> 

私はgulpタスクを書き留めていますが、間には紛失しています。私はgulp-domプラグインを使用しています。

var gulp = require('gulp'); 
var dom = require('gulp-dom'); 
gulp.task('prepend-html', function(){ 
    return gulp.src('./**/*.html') 
     .pipe(dom(function(){ 
      var divLengths = this.querySelectorAll('small').length; 
      var parentDiv = this.querySelector('small'); 
      for(var i = 0; i < divLengths; i++) { 
       var childSpan = this.createElement('span'); 
       childSpan.setAttribute('aria-hidden', 'true'); 
       childSpan.setAttribute('class', 'error-icon'); 
       parentDiv.insertBefore(childSpan, parentDiv.firstChild); 
       return this; 
      } 
     })) 
     .pipe(gulp.dest(function(file){ 
       return file.base; 
    })); 
}); 

私はループ内で混乱していることは知っています。それは期待どおりではありません。各フォルダーと各ファイルに移動し、小さな要素を探してからspan要素を前に追加する必要があります。どんな種類の助けも本当に感謝しています。

Answer 1

forループでのみ単一スパンで操作しています。以下は動作します -

 var gulp = require('gulp'); 
    var dom = require('gulp-dom'); 
    gulp.task('default', function(){ 
     return gulp.src('./**/*.html') 
      .pipe(dom(function(){ 
       var divLengths = this.querySelectorAll('small').length; 
       var parentDiv = this.querySelectorAll('small'); 
       for(var i = 0; i < divLengths; i++) { 
        console.log(i); 
        var childSpan = this.createElement('span'); 
        childSpan.setAttribute('aria-hidden', 'true'); 
        childSpan.setAttribute('class', 'error-icon'); 
        parentDiv[i].insertBefore(childSpan, parentDiv[i].firstChild); 
       } 
       return this; 
      })) 
      .pipe(gulp.dest(function(file){ 
        return file.base; 
     })); 
    });