html属性に基づいてグループ構築プロセスに条件を追加する

Question

プロジェクト内のすべてのhtmlファイルのimgタグにmy-custom-directiveのような別の属性を設定するような条件を追加できますか？

私は、Webアプリケーション内の相対img src URLのベースURLを変更するアングルディレクティブを持っています。チームメンバが作成するhtmlテンプレートでこの属性が不足しないようにしたいと思います。

Answer 1

あなたは、これは、すべての画像に属性を追加する

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

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

...すべてのタグを変更するgulp-replaceを使用することができます。より多くの制御が必要な場合は、gulp-tapを使用して、ファイル全体の内容を取得して&を処理することができます。

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')); 
});