将grunt-connect-proxy添加到生成器角度gruntfile.js [英] Adding grunt-connect-proxy to generator-angular gruntfile.js
问题描述
我正在尝试在一个eoeoman生成器角度项目(generator-angular 0.15.1)中将grunt-connect-proxy添加到我的gruntfile.js中,但是由于它的编写方式,我似乎无法使其正常工作变化,我对Grunt的工作方式缺乏经验.
I'm trying to add grunt-connect-proxy to my gruntfile.js in a yeoman generator-angular project (generator-angular 0.15.1) but I can't seem to get it to work since the way it's written changes and I'm inexperienced in how Grunt works.
我已经阅读了很多关于此的文章,并且没有特别最新的文章,并且gruntfile似乎在实现livereload中间件的方式上经常发生变化,这使得grunt-connect-proxy的文档在我的情况下不起作用.
I've read many posts about this and none are particularly up-to-date, and the gruntfile changes seemingly often in how it implements livereload middleware This makes the documentation for grunt-connect-proxy to not work in my case.
棘手的部分在livereload下
The tricky part is under livereload
这是在生成器角度gruntfile中的外观:
This is how it looks in generator-angular gruntfile:
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
proxies: [{
context: '/api',
host: 'localhost',
port: 8080,
https: false,
xforward: false
}],
livereload: {
options: {
open: true,
// --- how the code looks like before I do anything
middleware: function (connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect().use('/app/styles', connect.static('./app/styles')),
connect.static(appConfig.app)
];
}
}
},
...
当我查看文档时,它看起来像这样:
When I look at the documentation it looks like this:
livereload: {
options: {
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;
}
}
}
有人可以帮助我将文档翻译成编写中间件的新方式吗?
Can someone help me translate the documentation to the new way of writing the middleware part?
谢谢!
推荐答案
所以我得到了一些帮助,这就是解决方法:
So I got some help and this is how it was solved:
livereload: {
options: {
open: true,
middleware: function(connect) {
var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
return middlewares.concat(
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect().use('/app/styles', connect.static('./app/styles')),
connect.static(appConfig.app)
);
}
}
}
希望这对其他人也有帮助.
Hope this helps someone else too.
这篇关于将grunt-connect-proxy添加到生成器角度gruntfile.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!