Question

我已经设置了这样的grunt连接：

connect: {
    options: {
        port: 9000,
        livereload: 35729,
        hostname: 'localhost'
    },
    livereload: {
        options: {
            open: true,
            base: [
                'app'
            ]
        }
    }
}

效果很好 - 将我的index.html页面加载为：

http://localhost:9000

但是，为了使其与生产中的加载方式保持一致，我希望在添加额外的上下文路径时加载它，例如：

http://localhost:9000/myappcontext/secured

这可以通过grunt-contrib-connect简单地完成吗？或者我是否需要添加其他代理/中间件？

任何人都有这种类型设置的简单例子吗？

Answer 1

是的，您可以毫不费力地执行此操作，只需配置open选项：

connect: {
    options: {
        port: 9000,
        livereload: 35729,
        hostname: 'localhost'
    },
    livereload: {
        options: {
            open: {
                 target: 'http://localhost:9000/myappcontext/secured'
            },
            base: [
                'app'
            ]
        }
    }
}

You can consult the README for more information about the available options.

Answer 2

您可以使用重写中间件规则从不同的上下文根https://github.com/viart/http-rewrite-middleware

加载

这适用于您的场景：

    var rewriteModule = require('http-rewrite-middleware');
    middlewares.push(rewriteModule.getMiddleware([
        //Load App under context-root of 'myappcontext/secured'
        {from: '^/myappcontext/secured(.*)$', to: '/$1'},

        //Redirect slash to myappcontext/secured as convenience
        {from: '^/$', to: '/myappcontext/secured', redirect: 'permanent'},

        //Send a 404 for anything else
        {from: '^/.+$', to: '/404'}
    ]));

Answer 3

我有一个愚蠢的方法，但这是一种方法！

    copy: {
        "mount-server": {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: './.mount-server/myappcontext/secured/',    // your expected path here
                src: [
                    '**/**'
                ]
            }]
        }
    }

    open: {
        server: {
            path: 'http://localhost:9000/myappcontext/secured/index.html'
        }

    }

    connect: {
        options: {
            port: 80,
            // change this to '0.0.0.0' to access the server from outside
            hostname: null
        },
        livereload: {
            options: {
                middleware: function (connect, options) {
                    return [
                        lrSnippet,
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, "./.mount-server/")
                    ];
                }
            }
        }
    }

    grunt.registerTask('prepareServer', [
        "clean:mount-server",
        "copy:mount-server"
    ]);

    grunt.registerTask('server', function (target) {

        grunt.task.run([
            'concurrent:server',
            'prepareServer',
            'connect:livereload',
            'open:server',
            'watch'
        ]);
    });

Answer 4

由于这是一篇相当过时的帖子，我想我会分享我必须做的事情，因为有些库已经过时了，即使引用了这些库。这也显示了整个过程，而不是简单地评论。

库https://github.com/viart/grunt-connect-rewrite中的示例使用了非常过时的grunt-contrib-connect

版本

从版本0.11.x开始，新的grunt-contrib-connect不支持connect.static和connect.directory。您需要使用其他库serve-static

var rewriteRulesSnippet = require('grunt-connect-rewrite/lib/utils').rewriteRequest,
    serveStatic = require('serve-static');

connect: {
    options: {
        port: 9000,
        hostname: 'localhost',
        livereload: true //default port is 35729
    },
    rules: [
        { from: '^/yourfolder/(.*)$', to: '/$1' }
    ],
    server: {
        options: {
            base: './app', //where the files are served from
            open: {
                 target: 'http://localhost:9000/yourfolder'
            },
            middleware: function(connect, options) {
                return [
                    rewriteRulesSnippet, // RewriteRules support
                    serveStatic(options.base[0]) // new library used here
                ];
            }
        }
    }
}

使用grunt-contrib-connect - 打开的页面URL和添加的上下文路径

4 个答案: