static.htmlファイルとのブラウザ同期 - 正規表現ヘルプが必要

Question

"/ about"のようなリンクを持つ静的なHTMLファイルがあります。開発のために私はbrowsersyncでgulpを使い、 "/ about"のようなリンクを "/about.html"に内部的にリダイレクトしたいと思っています。

modRewriteをbrowsersyncにミドルウェアとして追加して正規表現を定義しようとしました。ファイルの終わりと末尾にスラッシュがないURLや末尾にスラッシュがないURLはすべて$ 1にリダイレクトされます。しかし、私はそれを働かせることはできません。

この規則は動作しますが、私はページごとに、それを定義する必要があります：

^(.+about)\/?$ $1.html [L] 

は、私はファイルが終わる何のファイルがない場合、HTMLにそれをリダイレクト（のようなルールを定義しようとしましたが、これは動作しません。完全に別の方向では

(!\.html|\.js|\.css|\.png$)\/?$ $1.html [L] 

Answer 1

私は今私のために働くこの2つの正規表現を思いついた。これらの正規表現はすべての可能なURLを考慮に入れていません...私はmodRewriteで\ wを使用する際に問題がありました。しかし、それは私のために今働くと私はそれが必要な場合にそれを修正します：

'^/$ /index.html [L]', 
'^(\/?(?!\.(?:html|js|css|png|jpg|svg)$)[a-z-]* (?:\/+[a-z-]+)*)\/?$ $1.html [L]' 

Answer 2

、私はしばらく前に同様の目的のために何かを開発したことは、かなり簡単なJavascriptを/ jQueryのコードを使用して内部URLの動的な変更を行います

。

静的な.jsファイルにJavascriptを配置してから、CDNのjQueryを組み込み、パブリックディレクトリのJavascriptコードを組み込むことができます。あなたが.htmlファイルからそのようにそれを使用することになり、ファイル「リンクrewriter.js」と呼ぶことを言う：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script type="text/javascript" src="/public/javascript/link-rewriter.js"></script> 

リンク書き換えのためのコードは次のようになります。

jQuery(document).ready(function() { 
    var parser = document.createElement('a'); 
    parser.href = '/'; 

    var domain = parser.protocol + '//' + parser.host; 
    var regexp = new RegExp('^' + escapeRegExp(domain), 'i'); 

    $('a[href^="http://"],a[href^="https://"],a[href^="//"]]').each(function(index, link) { 
     var href = link['href'].replace(regexp, ''); 

     if ((!/^\//.test(href)) && (!/\.html$/i.test(href)) { 
      link['href'] = link['href'] + '.html'; 
     } 
    }); 
}); 

このコードは、ドメインを定義するために、プロトタイプのリンク（アンカー）要素を作成してプロトコルとページのホストを照会することから始まります。

その後、すべてのHTTP、HTTPS、および相対的なローカルリンク要素は、それを書き換える必要があるかどうかを確認するために処理されます。処理コードは、最初にウェブページのドメインを取り除き、別のドメイン（またはプロトコル）またはこのドメインのいずれかのリンクを残します。このドメインのリンクはさらに処理され、.html拡張子がないものと、.html拡張子が自動的に付加されたものが表示されます。このアプローチには

五分五分：

• 単にページにタグを追加することは、それは驚くほど速いので、ユーザは、（それも数千人で、起こって気づくことはありません場所
• でリンクをアップグレードします!!）ページ上のリンクの同じドメインの
• リンクのみが変更され、リンクのさえ特定のグループは、このアプローチへ

欠点を対象とすることができます：

• ユーザーはJavascriptがブラウザで有効になっていなければなりません
• これはコードであるので、それが最終的にメンテナンスや機能の拡張が必要な​​場合があります（実際には、誰がこれらの日??ない）

Answer 3

modRewriteの必要性なしで解決策が見つかりました。 serve-staticパッケージは、あなたのためにすべてのハードワークを行うことができます。要求されたファイルが見つからないときに探す拡張子を指定するオプションを与えます。

var serveStatic = require('serve-static') 

gulp.task('server', function() { 
    return browserSync.init({ 
     server: { 
      baseDir: '/', 
      middleware: [ 
       serveStatic('/', { extensions: ['html'] }) 
      ] 
     } 
    }); 
});