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

Question

我已经像这样设置了 grunt connect：

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

由于这是一篇相当过时的帖子，我想我会分享我必须做的事情，因为有些库已经过时，甚至引用的库也是如此。这也显示了整个过程，而不是零散的 cmets。

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
                ];
            }
        }
    }
}