GULPを使っていくつかのhtmlコードをantoherに変更してください

Question

私の質問をチェックしていただきありがとうございます。これはささいなことかもしれませんが、私はここで助けが必要です。

と変更するにはどうすればいいですか？GULPです。または一部の文字列をと変更すると、GULPとなります。これに

<img class="social" src="../symbols/facebook.svg"> 

：たとえば今日、私はこれを変更する必要が

<svg class="social"> 
    <use xlink:href="../symbols/sprite.svg?v201608061556#facebook"></use> 
</svg> 

あなたは私がシンボル経由アイコンシステムを構築しています見ることができるように、私はそれのようにきれいな私の元のHTMLを維持したいです可能性があります。だから私はウォッチャーなどなくても働くことができます。後で私はGULPを一度実行するだけで、スプライトを作成し、このスプライトを使用するようにHTMLを変更します。

gulp-replaceを試しましたが、regexで文字列を変更することはできますが、正規表現ではそれほど複雑に見えます。私はそれが正規表現でできることは確かではない。また、タイムスタンプを？v201608061556と追加したいと思います。だから私はgulpファイルで書くことができるいくつかのJavaScriptを実行したい。

次に試したのはgulp-domで、必要なもののようです。 正規表現を作るために

1. ことが可能です：ターミナルで

   if (node.nodeType === NODE_TYPE.DOCUMENT_NODE) { 
        ^
   TypeError: Cannot read property 'nodeType' of undefined 
   

   エラーログ：

   ので質問ですが、私はそれが何らかのエラーのために働くことはできませんおよびパッケージをパッケージに交換しますか？

2. 誰でも知っているgulp-dom パッケージ。どういうわけか、それを働かせることはできますか？私の タスクを完了することは可能ですか？
3. Gulpタスク にJavaScriptを書き込む別の方法はありますか。私は文字列を取ることができます。私の必要に応じてすべてのJavaScript機能を使って処理して保存しますか？
4. GulpのHTMLと同じ方法で作業することができます ウェブサイトをコーディングすると機能しますか？ DOMを使用する場合、 querySelectorとclassListなどを使用しますか？たぶんjQuery？

ありがとうございます。

Answer 1

私はgulp-changeを見つけました。これはファイル内容を文字列として提供します。あなたは、javascriptでその文字列で必要なものをすべて実行してから、パイプに戻すことができます。

Answer 2

gulpタスクストリームを投稿した場合、問題を診断する方が簡単です。あなたが提供した情報では、このエラーが発生していると思います（プラグインページの例に従えば、完全なドキュメント表現ではなく、変更した要素が返されている可能性が高いからです）。

1. は、最初の要素（複数可）に変更を加えるしたい：あなたはgulp-domとDOMを操作するために取るべき2つの重要なステップがあり

   gulp.task('html', function() { 
   return gulp.src('./src/index.html') 
       .pipe(dom(function(){ 
        return this.querySelectorAll('body')[0].setAttribute('data-version', '1.0'); 
       })) 
       .pipe(gulp.dest('./public/')); 
   }); 
   

   ：以下は一気のプラグインのページからの例を以下のこれが行われた後などgetElmentById、setAttribute、appendChild、

2. ような単純なJSのDOM操作メソッドを使用して、あなたのがぶ飲みストリームあなたはmodificatioのために標的にされている、いない要素（複数可）this（文書全体）を返す必要がありますn。あなたのケースでは

あなたはこのような何か（あなたはあまりにも冗長これを見つけた場合、あなたが完全に異なるプラグイン/アプローチを使用しようとすること）を行うことができます：私は上記のコードをテストし、それが動作

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

gulp.task('domManipulation', function() { 
    return gulp.src('app/index.html') 
    .pipe(dom(function(){ 
     // cache/create all elements you will work with --'this' is your Document 
     var parentDiv = this.querySelector('div.imgParent'); 
     var img = this.querySelector('img.social'); 
     var svg = this.createElement('svg'); 
     var use = this.createElement('use'); 

     // DOM manipulation 
     svg.classList.add('social'); 
     use.setAttribute('xlink:href', "../symbols/sprite.svg?v201608061556#facebook"); 
     svg.appendChild(use); 
     parentDiv.replaceChild(svg, img); 

     return this; // return the whole Document 
    })) 
    .pipe(gulp.dest('dist')); 
}); 

ちょうど良い。お役に立てれば。