没有 livereload 的 grunt 连接代理（使用 watch）不代理上下文

Question

我遵循grunt-connect-proxy 存储库的所有步骤，但代理不起作用。

在 grunt-connect-proxy 的 README 中，他们说 with or without livereload 但现在是“”watch**，所以...我使用的是 watch，而不是 livereload（并将watch 选项中的 livereload 代码）。

MainCtrl - 控制器

...
angular.module('vedita')
  .controller('MainCtrl', ['$scope', '$resource', function($scope, $resource) {
    $resource('/api/edges').query();
    ...

---

开始：grunt dev

$ grunt dev
Running "bower:install" (bower) task
>> Cleaned target dir c:\workspace\estudo\js\angularjs\vedita-test\frontend\libs
>> Installed bower packages

Running "configureProxies:server" (configureProxies) task
Proxy created for: /api to localhost:3000

Running "connect:server" (connect) task
Started connect web server on http://localhost:9000

Running "watch:dev" (watch) task
Waiting...
Running "jshint:all" (jshint) task
>> 5 files lint free.

Running "html2js:dist" (html2js) task
Successfully converted 0 html templates to js.

Running "concat:dist" (concat) task
File dist/app.js created.

Running "clean:temp" (clean) task
Cleaning tmp...OK

Done, without errors.
Completed in 3.753s at Mon Sep 22 2014 15:18:45 GMT-0300 (Hora oficial do Brasil) - Waiting...

---

Google DevTools - 控制台错误

---

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    bower: {
      install: {
        options: {
          install: true,
          copy: false,
          targetDir: './libs',
          cleanTargetDir: true
        }
      }
    },

    jshint: {
      all: [ 'Gruntfile.js', 'app/*.js', 'app/**/*.js' ]
    },

    html2js: {
      dist: {
        src: [ 'app/templates/*.html', 'app/templates/**/*.html' ],
        dest: 'tmp/templates.js'
      }
    },

    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: [ 'app/*js', 'app/**/*js', 'tmp/*.js' ],
        dest: 'dist/app.js'
      }
    },

    uglify: {
      dist: {
        files: {
          'dist/app.js': [ 'dist/app.js' ]
        },
        options: {
          mangle: false
        }
      }
    },

    clean: {
      temp: {
        src: [ 'tmp' ]
      }
    },

    watch: {
      dev: {
        files: [ 'Gruntfile.js', 'app/*.js', 'app/**/*.js', '*.html' ],
        tasks: [ 'jshint', 'html2js:dist', 'concat:dist', 'clean:temp' ],
        options: {
          atBegin: true,
          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;
          }          
        }
      },
      min: {
        files: [ 'Gruntfile.js', 'app/*.js', 'app/**/*.js', '*.html' ],
        tasks: [ 'jshint', 'html2js:dist', 'concat:dist', 'clean:temp', 'uglify:dist' ],
        options: {
          atBegin: true
        }
      }
    },

    connect: {
      server: {
        options: {
          hostname: 'localhost',
          port: 9000         
        },
        proxies: [
          {
            context: '/api',
            host: 'localhost',
            port: 3000
          }
        ]
      }
    },

    compress: {
      dist: {
        options: {
          archive: 'dist/<%= pkg.name %>-<%= pkg.version %.zip'
        },
        files: [
          {
            src: ['index.html'],
            dest: '/'
          }, {
            src: ['dist/**'],
            dest: 'dist/'
          }, {
            src: ['assets/**'],
            dest: 'assets/'
          }, {
            src: ['libs/**'],
            dest: 'libs/'
          }
        ]
      }
    }

    // Task configuration will be written here
  });

  // Loading of tasks and registering tasks will be written here
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-connect-proxy');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-compress');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-html2js');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-karma');

  grunt.registerTask('dev', [ 'bower', 'configureProxies:server', 'connect:server', 'watch:dev' ]);
  grunt.registerTask('test', [ 'bower', 'jshint', 'karma:continuous' ]);
  grunt.registerTask('minified', [ 'bower', 'connect:server', 'watch:min' ]);
  grunt.registerTask('package', [ 'bower', 'jshint', 'karma:unit', 'html2js:dist', 'concat:dist', 'uglify:dist',
    'clean:temp', 'compress:dist' ]);
};

---

我按照本教程学习如何使用 AngularJS 和 Grunt：http://g00glen00b.be/angular-grunt/

Obs.：我是 AngularJS 和 Grunt 的新手。

---

如果您需要更多信息，请告诉我。不要在没有说明原因的情况下对问题投反对票。

Answer 1

Ì找到解决方案：

我需要将中间件从watch删除到connect，像这样：

connect: {
  server: {
    options: {
      hostname: 'localhost',
      port: 9000,
      middleware: function (connect, options) {
        var middlewares = [];
        options.base.forEach(function (base) {
           // Serve static files.
           middlewares.push(connect.static(base));
        });
        middlewares.push(proxySnippet);
        return middlewares;
      }                            
    },
    proxies: [
      {
        context: '/api',
        host: 'localhost',
        port: 3000,
        https: false,
        // changeOrigin: false,
        xforward: true            
      }
    ]
  }
},

然后...我把这个变量放在Gruntfile.js的顶部：

module.exports = function(grunt) {

  var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

并且有效！

谢谢大家！