Grunt Livereload + Grunt Connect Proxy [英] Grunt Livereload + Grunt Connect Proxy

问题描述

我正在使用Rails作为我的API，AngularJS在前台，而且我有一些问题需要livereload / grunt连接代理才能正常工作。

这里是摘录从我的gruntfile：

  connect：{
 options：{
 port：9000，
 //将其更改为'0.0.0.0'以从外部访问服务器。 
主机名：'localhost'，
 livereload：35729 
}，
代理：[
 {
上下文：'/ api'，
 host：'localhost'，
 port：3000 
} 
]，
 livereload：{
 options：{
 open：true，
 base：[
'.tmp'，
'<％= yeoman.app％>'
]，
中间件：函数（connect，options）{
 var middlewares = []; 
 var directory = options.directory || options.base [options.base.length  -  1]; 
 
 //启用Angular的HTML5模式
 middlewares.push（modRewrite（['！\\.html | \\.js | \\.svg | \ \.css | \\.png $ /index.html [L]']））; 
 
 if（！Array.isArray（options.base））{
 options.base = [options.base]; 
} 
 options.base.forEach（function（base）{
 //服务静态文件
 middlewares.push（connect.static（base））; 
 }）; 
 
 //使目录可浏览。 
 middlewares.push（connect.directory（directory））; 
 
返回中间件; 
} 
} 
}，
 test：{
 options：{
 port：9001，
 base：[
' .tmp'，
'test'，
'<％= yeoman.app％>'
] 
} 
}，
 dist： {
选项：{
ase：'<％= yeoman.dist％>'
} 
} 
} 
  

如果我'grunt build'一切正常 - 关闭 localhost：3000

然而，如果我'grunt serve'它通过 127.0.0.1:9000 打开一个窗口，并且我得到了404到我所有的API

同样在服务中，它是从CSS文件中篡改我的背景图像我得到这个警告：

 资源解释为图像，但使用MIME类型text / html传输：http://127.0.0.1:9000/images/RBP_BG.jpg
  

我以前没有这样做过 - 所以ces是我所做的一切都是错误的。

解决方案

我不喜欢你的 connect.livereload.middleware 配置。

是否有必要？

查看 this commit - chore（yeoman-gruntfile-update）：configured grunt-connect-proxy 在我的一些项目中。

• 后端是Django


• ports：前端：9000，后端：8000
  
• generator-angular 生成项目时在v.0.6.0中


• 我的 connect.livereload.middleware 配置基于： https://stackoverflow.com/a/19403176/1432478

I am using Rails for my API, AngularJS on the front and I am having some issues getting livereload / grunt connect proxy to work properly.

Here is the snippet from my gruntfile:

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: 3000
        }
      ],
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ],
          middleware: function (connect, options) {
            var middlewares = [];
            var directory = options.directory || options.base[options.base.length - 1];

            // enable Angular's HTML5 mode
            middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }
            options.base.forEach(function(base) {
              // Serve static files.
              middlewares.push(connect.static(base));
            });

            // Make directory browse-able.
            middlewares.push(connect.directory(directory));

            return middlewares;
          }
        }
      },
      test: {
        options: {
          port: 9001,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ]
        }
      },
      dist: {
        options: {
          base: '<%= yeoman.dist %>'
        }
      }
    }

If I 'grunt build' everything works perfectly - off localhost:3000

However if I 'grunt serve' it opens a window through 127.0.0.1:9000 and I get 404 to all my API calls.

Also under serve it is mangling my background images from a CSS file I get this warning:

Resource interpreted as Image but transferred with MIME type text/html: "http://127.0.0.1:9000/images/RBP_BG.jpg"

I haven't done this before - so chances are I am doing it all wrong.

解决方案

I don't like too much code in your connect.livereload.middleware configuration.
Is that all necessary ?

Take a look at this commit - chore(yeoman-gruntfile-update): configured grunt-connect-proxy in some of my projects.

• backend is Django
• ports: frontend: 9000, backend: 8000
• generator-angular was in v.0.6.0 when generating the project
• my connect.livereload.middleware configuration was based on: https://stackoverflow.com/a/19403176/1432478

这篇关于Grunt Livereload + Grunt Connect Proxy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！