3

我设法将 grunt 配置为为我的应用程序提供服务，但由于它在 localhost:9000 上提供服务，因此我的 api 调用也转到端口 9000，而我的 api 在端口 3000，导致 404 错误。

经过一番研究，我决定我需要使用 grunt-connect-proxy 将我的 api 调用代理到正确的端口。我一直在努力阅读每篇文章、堆栈溢出问题和文档，但我似乎无法正确配置。请参阅下面的 gruntfile。任何帮助都会让我感激不尽。

// Invoke 'strict' JavaScript mode
'use strict';

module.exports = function(grunt) {
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
    grunt.initConfig({
        less: {
            development: {
                options: {
                    compress: true,
                    yuicompress: true,
                    optimization: 2,
                    paths: ['public/styles/less']
                },
                files: {
                    "public/styles/css/main.css": "public/styles/less/main.less" // destination file and source file
                }
            }
        },
        watch: {
            styles: {
                files: ['public/styles/less/*.less'],
                tasks: ['less'],
                options: {
                    nospawn: true
                }
            }
        },
        connect: {
            server: {
                options: {
                    port: 8000,
                    base: 'public',
                    logger: 'dev',
                    hostname: 'localhost',
                    middleware: function (connect, options, defaultMiddleware) {
                        var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
                        return [
                            // Include the proxy first
                            proxy
                        ].concat(defaultMiddleware);
                    }
                },
                proxies: [
                    {
                        context: '/',
                        host: '127.0.0.1',
                        port: 3000,
                        https: false,
                        xforward: false,
                        headers: {
                            "x-custom-added-header": 'value'
                        },
                        hideHeaders: ['x-removed-header']
                    }
                ]
            },
            serve: {
                options:{
                    port: 9000,
                    hostname: "127.0.0.1",
                    middleware: function(connect, options) {
                    return [
                        require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
                        connect.static(options.base[0])
                    ];
                }
            }
        }
    },
    open: {
      serve: {
        path: 'http://localhost:<%= connect.serve.options.port%>/public'
      }
    },
    regarde: {
        serve: {
            files:['public/index.html','public/script/*.js','public/script/**/*.js','public/styles/**/*.css','public/styles/less/*.less','public/views/*.html'],
            tasks: ['livereload']
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
//grunt.loadNpmTasks('grunt-contrib-clean');
//grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-connect-proxy');

grunt.registerTask('serve',['less','livereload-start','connect:serve','open:serve','regarde:serve']);
grunt.registerTask('server', function (target) {
    grunt.task.run([
        //'clean:server',
        //'compass:server',
        'configureProxies:server',
        'connect:server',
        'watch'
    ]);
});

};

4

0 回答 0