Post-processing multiple HTML files: Copy
contents to tag</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2016-01-14T22:36:54.240" class="fromnow">Jan 14 '16 at 22:36</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2016-03-29T02:24:36.370" datetime="2016-03-29T02:24:36.370">Mar 29 '16 at 02:24</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 236 times"> <span class="fc-light mr2">Viewed</span> 236 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="34801099" data-ownerid="266991" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34801099"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Suppose I have a number of compiled HTML-files from Harp, the static site generator.</p> <p>My question:</p> <p><strong>How do I post-process multiple HTML files, in each, automatically copying the contents of < h1> tag to the < title> tag?</strong></p> <p>I'm wondering, if <em>Gulp</em> would be right for the job (and if so, how?), or if, perhaps, <em>Sublime Text 3</em> would have such feature built-in?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/gulp" class="post-tag js-gps-track" title="show questions tagged 'gulp'" rel="tag">gulp</a> <a href="../../questions/tagged/sublimetext3" class="post-tag js-gps-track" title="show questions tagged 'sublimetext3'" rel="tag">sublimetext3</a> <a href="../../questions/tagged/post-processing" class="post-tag js-gps-track" title="show questions tagged 'post-processing'" rel="tag">post-processing</a> <a href="../../questions/tagged/harp" class="post-tag js-gps-track" title="show questions tagged 'harp'" rel="tag">harp</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 14 '16 at 22:36">asked Jan 14 '16 at 22:36</time> <a href="../../users/266991/agibsen" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/266991.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="agibsen" /> </a> <div class="s-user-card--info"> <a href="../../users/266991/agibsen" class="s-user-card--link">agibsen</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">867</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="10 silver badges">10</li> <li class="s-award-bling s-award-blingbronze" title="18 bronze badges">18</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="36274318"></a> <div id="answer-36274318" class="answer " data-answerid="36274318" data-ownerid="477790" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="36274318"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>hmm...well you <strong>can</strong> use gulp or grunt or any other build tool to do that.</p> <p>You can also use some other text find-and-replace tools like sed.</p> <p>if you need more stuff to do on your files (packging, post-processing, move, rename, ...) it makes sense to use gulp/grunt.</p> <p>If you ended up using gulp/grunt you need to define a task which reads the content of those files and then does the replace and write to file. (a bit of nodejs knowledge is required + javascript basics)</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 29 '16 at 02:24">answered Mar 29 '16 at 02:24</time> <a href="../../users/477790/bakhshi" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/477790.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bakhshi" /> </a> <div class="s-user-card--info"> <a href="../../users/477790/bakhshi" class="s-user-card--link">Bakhshi</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,299</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-blingbronze" title="25 bronze badges">25</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="34801676"></a> <div id="answer-34801676" class="answer " data-answerid="34801676" data-ownerid="4859669" data-score="-1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="34801676"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>How about doing it dynamically onpage load?</p> <pre><code>var newtext = $("h1").text(); $("title").text(newtext); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 14 '16 at 23:22">answered Jan 14 '16 at 23:22</time> <a href="../../users/4859669/korgrue" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4859669.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Korgrue" /> </a> <div class="s-user-card--info"> <a href="../../users/4859669/korgrue" class="s-user-card--link">Korgrue</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,430</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="13 silver badge">13</li> <li class="s-award-bling s-award-bling__bronze" title="20 bronze badge">20</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-34801676" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="34801676" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-57357397" class="comment js-comment " data-comment-id="57357397" data-comment-owner-id="266991" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment57357397_34801676"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks, however, I would be prefer files that are static at "runtime", thus not dependent on JS (which might be turned off in the user's browser). Also, there could be issues with search engine web crawlers/SEO, if title tags are populated dynamically?</span> – <a href="../../users/266991/agibsen" title="867 reputation" class="comment-user owner">agibsen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/34801099/post-processing-multiple-html-files-copy-h1-contents-to-title-tag#comment57357397_34801676"><span title="2016-01-15T09:09:27.207 License: CC BY-SA 3.0" class="relativetime-clean">Jan 15 '16 at 09:09</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>