gruntサーバーを使用すると、すべてのリクエストをルートURLにリダイレクトできますか？

Question

私は初めてAngular.jsアプリケーションを構築しており、Yeomanを使用しています。

YeomanはGruntを使用して、 'grunt server'コマンドでnode.js接続サーバーを実行できます。

私は角形アプリケーションをhtml5モードで実行しています。 angleドキュメントによれば、角度アプリケーションはシングルページのajaxアプリケーションなので、これはアプリケーションのルート（index.html）にすべての要求をリダイレクトするためにサーバを変更する必要があります。

は

問題「[HTML5]モードを使用すると、基本的に、あなたのアプリケーションのエントリポイント（例えばindex.htmlを）へのすべてのリンクを書き換える必要があり、サーバ側でURL書き換えを要求する」というI解決しようとしているのはthisです。

すべてのページリクエストをindex.htmlページにリダイレクトするようにgrunt serverを変更するにはどうすればよいですか？

Answer 1

まず、コマンドラインを使用して、gruntfileでディレクトリに移動します。

このCLIでの種類：

npm install --save-dev connect-modrewrite 

あなたのうなり声ファイルの上部でこの置き：今

var modRewrite = require('connect-modrewrite'); 

を次の部分は、あなただけの接続にmodRewriteを追加したい：

modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']), 

私の「接続」が私のGruntfile.js内でどのように見えるかの例です。あなたは私のlrSnippetと私のssIncludesについて心配する必要はありません。あなたが必要とする主なものは、ただでmodRewriteを取得することです。

 connect: { 
     options: { 
      port: 9000, 
      // Change this to '0.0.0.0' to access the server from outside. 
      hostname: '0.0.0.0', 
     }, 
     livereload: { 
      options: { 
       middleware: function (connect) { 
       return [ 
         modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']), 
         lrSnippet, 
         ssInclude(yeomanConfig.app), 
         mountFolder(connect, '.tmp'), 
         mountFolder(connect, yeomanConfig.app) 
         ]; 
       } 
      } 
     }, 
     test: { 
      options: { 
       middleware: function (connect) { 
        return [ 
        mountFolder(connect, '.tmp'), 
        mountFolder(connect, 'test') 
        ]; 
       } 
      } 
     }, 
     dist: { 
      options: { 
       middleware: function (connect) { 
        return [ 
        mountFolder(connect, yeomanConfig.dist) 
        ]; 
       } 
      } 
     } 
    }, 

Answer 2

この問題のために送信したプルリクエストがあります：https://github.com/yeoman/generator-angular/pull/132ですが、手動で適用する必要があります。

Answer 3

FYIヨーマン/うなり声は、最近、新しいGruntfilesのデフォルトのテンプレートを変更しました。

Copying the default middlewares logicは私のために働いた：

middleware: function (connect, options) { 
    var middlewares = []; 
    var directory = options.directory || options.base[options.base.length - 1]; 

    // enable Angular's HTML5 mode 
    middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]'])); 

    if (!Array.isArray(options.base)) { 
    options.base = [options.base]; 
    } 
    options.base.forEach(function(base) { 
    // Serve static files. 
    middlewares.push(connect.static(base)); 
    }); 

    // Make directory browse-able. 
    middlewares.push(connect.directory(directory)); 

    return middlewares; 
} 

---

がUPDATE：のとして接続し、サーバにミドルウェアを注入し、0.9.0作男-contribの-接続されてはるかに簡単：

module.exports = function (grunt) { 
    // Load grunt tasks automatically 
    require('load-grunt-tasks')(grunt); 
    grunt.initConfig({ 
    // The actual grunt server settings 
    connect: { 
     livereload: { 
     options: { 
     /* Support `$locationProvider.html5Mode(true);` 
      * Requires grunt 0.9.0 or higher 
      * Otherwise you will see this error: 
      * Running "connect:livereload" (connect) task 
      * Warning: Cannot call method 'push' of undefined Use --force to continue. 
      */ 
      middleware: function(connect, options, middlewares) { 
      var modRewrite = require('connect-modrewrite'); 

      // enable Angular's HTML5 mode 
      middlewares.unshift(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]'])); 

      return middlewares; 
      } 
     } 
     } 
    } 
    }); 
} 

Answer 4

@ Zurielの答えを深く簡略化するために、ここで私の代わりに働くことがわかった。

• 接続-modrewriteをインストールします。npm install connect-modrewrite --save
• は、あなたのイサキファイルでそれを含める：var rewrite = require("connect-modrewrite");

• リライトを使用するように接続オプションを変更します限り、これを簡素化

  connect: { 
      options: { 
       middleware: function (connect, options, middlewares) { 
        var rules = [ 
         "!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif$ /index.html" 
        ]; 
        middlewares.unshift(rewrite(rules)); 
        return middlewares; 
       } 
      }, 
      server: { 
       options: { 
        port: 9000, 
        base: "path/to/base" 
       } 
      } 
  } 
  

できるだけ。 connectによって提供されるミドルウェアにアクセスできるので、最初の優先順位の応答に書き換えを設定するのは簡単です。質問がされてからしばらくしていることは分かっていますが、これは問題に関するGoogleの検索結果のトップです。 https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139
ルール文字列：

アイデアは、ソースコードから来たhttp://danburzo.ro/grunt/chapters/server/

Answer 5

私はこれらのすべてを試みたが、運がなかったです。私はangle2アプリを書いていますが、その解決策は、grunt-connectプッシュステートから来ました。 私がしたすべてはだった：

npm install grunt-connect-pushstate --save 

とイサキファイルに：

var pushState = require('grunt-connect-pushstate/lib/utils').pushState; 
middleware: function (connect, options) { 
    return [ 
    // Rewrite requests to root so they may be handled by router 
    pushState(), 

    // Serve static files 
    connect.static(options.base) 
    ]; 
} 

と、それはすべての魔法のように働きました。

https://www.npmjs.com/package/grunt-connect-pushstate