Yeoman 생성 gruntfile.js에 grunt-connect-proxy를 추가했습니다.

Question

저는 Grunt (그리고 JavaScript는 일반적으로)에 익숙하지 않습니다. Yeoman 생성 gruntfile에 grunt-connect-proxy를 추가하려고합니다. (생성자 각도 0.10 .0).

내가 도와 주려고 -->this 가이드를 읽었으나 같은 방식으로 더 이상 수행되지 않는 것 같습니다. 이 코드에 대한

  return [ 
      connect.static('.tmp'), 
      connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
      connect.static(appConfig.app) 
     ]; 

가이드에서 촬영 :

  base: [ 
     '.tmp', 
     '<%= yeoman.app %>' 
     ], 
     middleware: function (connect, options) { 
     if (!Array.isArray(options.base)) { 
      options.base = [options.base]; 
     } 

     // Setup the proxy 
     var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest]; 

     // Serve static files. 
     options.base.forEach(function (base) { 
      middlewares.push(connect.static(base)); 
     }); 

     // Make directory browse-able. 
     var directory = options.directory || options.base[options.base.length - 1]; 
     middlewares.push(connect.directory(directory)); 

     return middlewares; 

그것은 것

이

내가이 부분을 전환하면 생성 된 gruntfile이

// The actual grunt server settings 
connect: { 
    options: { 
    port: 9000, 
    // Change this to '0.0.0.0' to access the server from outside. 
    hostname: 'localhost', 
    livereload: 35729 
    }, 
    proxies: [ 
    { 
     context: '/api', 
     host: 'localhost', 
     port: 8080, 
     https: false 
    } 
    ], 
    livereload: { 
    options: { 
     open: true, 
     return [ 
      connect.static('.tmp'), 
      connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
      connect.static(appConfig.app) 
     ]; 
     } 
    } 
    }, 
    test: { 
    options: { 
     port: 9001, 
     middleware: function (connect) { 
     return [ 
      connect.static('.tmp'), 
      connect.static('test'), 
      connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
      connect.static(appConfig.app) 
     ]; 
     } 
    } 
    }, 
    dist: { 
    options: { 
     open: true, 
     base: '<%= yeoman.dist %>' 
    } 
    } 
}, 

모습입니다 프록시를 작동하게하고 포트 9000 (내 각도 응용 프로그램이 사용하는)에서 내 API를 가져옵니다. 하지만 CSS로 엉망이됩니다. 여하튼 bower 구성 요소와 관련이 있다고 생각합니다. 하지만 튜토리얼 코드에 bower 부분을 추가하는 방법을 모르거나 그 반대의 경우도 있습니다.

고마워요! 여기

Answer 1

는 솔루션 (발견이 here) :

... 
livereload: { 
    options: { 
    open: true, 
    //base: [ 
    // '.tmp', 
    // '<%= yeoman.app %>' 
    //], 
    //middleware: function (connect) { 
    // return [ 
    //  connect.static('.tmp'), 
    //  connect().use(
    //   '/bower_components', 
    //   connect.static('./bower_components') 
    //  ), 
    //  connect.static(appConfig.app) 
    // ]; 
    //} 
    middleware: function (connect, options) { 
     var middlewares = []; 

     //if (!Array.isArray(options.base)) { 
     // options.base = [options.base]; 
     //} 

     // Setup the proxy 
     middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest); 

     // Serve static files 
     //options.base.forEach(function(base) { 
     // middlewares.push(connect.static(base)); 
     //}); 

     middlewares.push(connect.static('.tmp')); 

     middlewares.push(
      connect().use(
       '/bower_components', 
       connect.static('./bower_components') 
      ) 
     ); 
     middlewares.push(connect.static(appConfig.app)); 

     return middlewares; 
    } 
    } 
}, 
...