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

Question

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

10

我已经按照以下方式设置了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可以简单地完成这个任务吗？还是我需要添加其他代理/中间件？

有没有人能给出这种设置的简单示例？

- Steve

你是在使用grunt-contrib-watch来处理实时重载吗？ - Jon Harding

4个回答

2

您可以使用Rewrite中间件规则从不同的上下文根加载，请访问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'}
    ]));

- Jeff Sheets

新版本似乎带有中间件。那能用来做什么吗？https://github.com/gruntjs/grunt-contrib-connect/#middleware - 但是从使用示例中无法弄清楚。 - Rhys

@Rhys 是的，你可以使用它来编写自己的函数来执行重写操作，但是 http-rewrite-middleware 以易于重用的方式实现了特定的重写功能。中间件只是 nodejs 的术语，用于请求/响应的过滤。您可以在代码中看到它的工作原理 https://github.com/viart/http-rewrite-middleware/blob/master/index.js - Jeff Sheets

0

我有一个很愚蠢的方法，但它就是一个方法！

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

- materliu

0

由于这篇文章相对较旧，我想分享一下我所做的事情，因为其中一些库甚至已经过时了。此外，这显示了整个过程，而不是将注释分散开来。

库中的示例 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
                ];
            }
        }
    }
}

- Jon Harding

我尝试了这个设置，但不幸的是它似乎没有起作用。我认为设置可能已经改变了。服务器似乎是父级，然后是选项。不确定规则应该放在哪里。我已经尝试了几乎所有的组合，但还没有成功。 - Rhys

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Allan Kimmer Jensen · Accepted Answer

你可以毫不费力地完成这项任务，只需配置open选项即可：

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

您可以查阅README以获取有关可用选项的更多信息。