title: Rename all selectors in all HTML, CSS and JS by pattern (add prefixes to selectors)
body: <p>I have a static website: <strong>HTML</strong>, <strong>CSS</strong>, <strong>JS</strong> files and <strong>no back-end</strong> programming. Parts of this website will be injected into another website. So I need to make sure that new CSS file from my project will not corrupt an old one and vice versa.</p>
  
  <p>One of the things I need to do is to rename all selectors like so:</p>
  
  <pre><code>&lt;button class="button"&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;button class="my-button"&gt;
  </code></pre>
  
  <p><strong>and</strong></p>
  
  <pre><code>.button {
      background: blue;
  }
  </code></pre>
  
  <p>to</p>
  
  <pre><code>.my-button {
      background: blue;
  }
  </code></pre>
  
  <p><strong>and</strong></p>
  
  <pre><code>$('.button').on('click');
  </code></pre>
  
  <p>to</p>
  
  <pre><code>$('.my-button).on('click');
  </code></pre>
  
  <p>Preferably with <strong>GULP</strong> or <strong>postCSS</strong> but any other way will work too. Is there any GULP plugins? So far I found only for CSS.</p>
  
  <p>Thanks.</p>