1

私は Grunt (および一般的な JavaScript) が初めてで、grunt-connect-proxy を Yeoman で生成された gruntfile (generator-angular 0.10.0) に追加しようとしています。

-->このガイドを読んで助けになりましたが、同じ方法で行われなくなったようです。

生成された 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 %>'
    }
  }
},

この部分を切り替えると:

            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;

これによりプロキシが機能し、ポート 9000 から API を取得します (私の angular-app が使用します)。しかし、それはcssを台無しにします。どういうわけかバウアーコンポーネントと関係があると思います。しかし、バウアー部分をチュートリアルコードに追加する方法、またはその逆の方法がわかりません。

どうもありがとう!

4

1 に答える 1