与grunt连接代理yeoman webapp不工作 [英] yeoman webapp with grunt-connect-proxy not working

问题描述

我已经安装了yeoman webapp生成器，并且正在尝试为另一台服务器设置代理。

我使用以下代码安装代理。
npm install grunt-connect-proxy --save-dev

当我运行grunt服务器时，它显示

 运行configureProxies任务
为/ people到localhost创建的代理：3000 
  

然后它指向我在localhost：9000上运行的一个页面，该页面显示Can not GET /
有一台服务器在localhost：3000上运行，我尝试了其他域没有成功。

这是我的Gruntfile.js

  //在2013-10-01生成使用generator-webapp 0.4.2 
'use strict'; 
 
 var proxySnippet = require（'grunt-connect-proxy / lib / utils'）。proxyRequest; 
 
 
 //＃Globbing 
 //出于性能原因，我们只匹配一个级别：
 //'test / spec / {，* /} * .js'
 //如果要递归匹配所有子文件夹，请使用此命令：
 //'test / spec / ** / *。js'
 
 module.exports =函数（grunt）{
 //显示最后经过的时间
 require（'time-grunt'）（grunt）; 
 //载入所有grunt任务
 require（'load-grunt-tasks'）（grunt）; 
 
 //可配置路径
 var yeomanConfig = {
 app：'app'，
 dist：'dist'
}; 
 
 grunt.initConfig（{
 yeoman：yeomanConfig，
 watch：{
 coffee：{
 files：['<％= yeoman.app ％> / scripts / {，* /} *。coffee']，
 tasks：['coffee：dist'] 
}，
 coffeeTest：{
 files：[ ''test / spec / {，* /} *。coffee']，
 tasks：['coffee：test'] 
}，
指南针：{'b $ b files：[' <％= yeoman.app％> / styles / {，* /} *。{scss，sass}']，
 tasks：['compass：server'，'autoprefixer'] 
} ，
 styles：{
 files：['<％= yeoman.app％> / styles / {，* /} * .css']，
 tasks：['copy：风格'，'autoprefixer'] 
}，
 livereload：{
选项：{
 livereload：'<％= connect.options.livereload％>'
}，
文件：[
'<％= yeoman.app％> / *。html'，
 '.tmp / styles / {，* /} * .css'，
'{.tmp，<％= yeoman.app％>} / scripts / {，* /} *。js'，
'<％= yeoman.app％> / images / {，* /} *。{png，jpg，jpeg，gif，webp，svg}'
] 
} 
 $ b连接：{
选项：{
端口：9000，
 livereload：35729，
 //将其更改为'0.0.0.0'以访问来自外部的服务器
 hostname：'localhost'
}，
代理：[
 {
 context：'/ people'，
 host：'localhost '，
 port：3000 
} 
]，
 livereload：{
 options：{
 open：true，
 base：[
'.tmp'，
 yeomanConfig.app 
]，
中间件：函数（连接）{
返回[
 proxySnippet 
]; 
} 
} 
}，
 test：{
 options：{
 base：[
'.tmp'，
 'test'，
 yeomanConfig.app 
] 
} 
}，
 dist：{
 options：{
 open：true，
 base：yeomanConfig.dist 
} 
} 
}，
 clean：{
 dist：{
 files：[{
 dot：true，
 src：[
'.tmp'，
'<％= yeoman.dist％> / *'，
'！<％= yeoman .dis％> / .git *'
] 
}] 
}，
服务器：'.tmp'
}，
 jshint：{ 
选项：{
 jshintrc：'.jshintrc'
}，
全部：[
 'gruntfile.js'，
'<％= yeoman.app％> / scripts / {，* /} *。js'，
'！<％= yeoman.app％> / scripts / vendor / *'，
'test / spec / {，* /} *。js'
] 
}，
摩卡：{
 all： {
 options：{
 run：true，
 urls：['http：//<％= connect.test.options.hostname％>：<％= connect.test .options.port％> /index.html'] 
} 
} 
}，
 coffee：{
 dist：{
 files：[ {
 expand：true，
 cwd：'<％= yeoman.app％> / scripts'，
 src：'{，* /} *。coffee'，
 dest：'.tmp / scripts'，
 ext：'.js'
}] 
}，
测试：{
 files：[{
 expand：true，
 cwd：'test / spec'，
 src：'{ ，* /} *。coffee'，
 dest：'.tmp / spec'，
 ext：'.js'
}] 
} 
}，
指南针：{
选项：{
 sassDir：'<％= yeoman.app％> / styles'，
 cssDir：'.tmp / styles'，
 generatedImagesDir：'.tmp / images / generated'，
 imagesDir：'<％= yeoman.app％> / images'，
 javascriptsDir：'<％= yeoman.app％> / scripts'，
 fontsDir：'<％= yeoman.app％> / styles / fonts'，
 importPath：'<％= yeoman.app％> / bower_components'，
 httpImagesPath：'/ images'，
 httpGeneratedImagesPath：'/ images / generated'，
 httpFontsPath：'/ styles / fonts'，
 relativeAssets：false 
}，
 dist：{
 options：{
 generatedImagesDir：'<％= yeoman.dist％> / images / gene等级为'
} 
}，
服务器：{
选项：{
 debugInfo：true 
} 
} 
}， 
 autoprefixer：{
 options：{
 browsersers：['last 1 version'] 
}，
 dist：{
 files：[{
 expand：true，
 cwd：'.tmp / styles /'，
 src：'{，* /} *。css'，
 dest：'.tmp / styles /' 
}] 
} 
}，
 //不使用，因为Uglify任务确实是concat，
 //但是如果需要仍然可用
 / * concat： {
 dist：{} 
}，* / 
 requirejs：{
 dist：{
 //选项：https：//github.com/jrburke/r .js / blob / master / build / example.build.js 
选项：{
 //`name`和`out`由grunt-usemin设置
 baseUrl：yeomanConfig.app + '/脚本s'，
优化：'none'，
 // TODO：弄清楚如何使源代码在grunt-usemin 
下工作// https://github.com/yeoman/grunt- usemin / issues / 30 
 // generateSourceMaps：true，
 //需要支持SourceMaps 
 // http://requirejs.org/docs/errors.html#sourcemapcomments 
 preserveLicenseComments：false，
 useStrict：true，
 wrap：true 
 // uglify2：{} // https://github.com/mishoo/UglifyJS2 
} 
} 
}，
 rev：{
 dist：{
 files：{
 src：[
'<％= yeoman.dist％> ; / scripts / {，* /} *。js'，
'<％= yeoman.dist％> / styles / {，* /} *。css'，
'<％ = yeoman.dist％> / images / {，* /} *。{png，jpg，jpeg，gif，webp}'，
' <％= yeoman.dist％> / styles / fonts /{,*/}*.*'
] 
} 
} 
}，
 useminPrepare ：{
 options：{
 dest：'<％= yeoman.dist％>'
}，
 html：'<％= yeoman.app％> /index.html'
}，
 usemin：{
 options：{
 dirs：['<％= yeoman.dist％>'] 
} ，
 html：['<％= yeoman.dist％> / {，* /} *。html']，
 css：['<％= yeoman.dist％> / styles / {，* /} *。css'] 
}，
 imagemin：{
 dist：{
 files：[{
 expand：true，
 cwd：'<％= yeoman.app％> / images'，
 src：'{，* /} *。{png，jpg，jpeg}'，
 dest：'< ;％= yeoman.dist％> / images'
}] 
} 
}，
 svgmin：{
 dist：{
 files：[ {
 expan d：true，
 cwd：'<％= yeoman.app％> / images'，
 src：'{，* /} *。svg'，
 dest：'< ;％= yeoman.dist％> / images'
}] 
} 
}，
 cssmin：{
 //这个任务是预先配置好的不希望将Usemin 
 //块用于您的CSS。默认情况下，
 //``index.html`中的Usemin块将处理缩小，例如
 // 
 //<！ -  build：css（{。tmp，app}）styles / main.css  - > 
 // 
 // dist：{
 //文件：{
 //'<％= yeoman.dist％> /styles/main.css'：[ 
 //'.tmp / styles / {，* /} * .css'，
 //'<％= yeoman.app％> / styles / {，* /} * .css '
 //] 
 //} 
 //} 
}，
 htmlmin：{
 dist：{
 options：{
 / * removeCommentsFromCDATA：true，
 // https://github.com/yeoman/grunt-usemin/issues/44 
 // collapseWhitespace：true，
 collapseBooleanAttributes：true， 
 removeAttributeQuotes：true，
 removeRedundantAttributes：true，
 useShortDoctype：true，
 removeEmptyAttributes：true，
 removeOptionalTags：true * / 
}，
文件：[{
展开：true，
 cwd：'<％= yeoman.app％>'，
 src：'* .html'，
 dest：'<％= yeoman.dist％>'
} ] 
} 
}，
 //将未在其他任务中处理的文件放在这里
复制：{
 dist：{
 files：[{
 expand：true，
 dot：true，
 cwd：'<％= yeoman.app％>'，
 dest：'<％= yeoman.dist％> '，
 src：[
'*。{ico，png，txt}'，
'.htaccess'，
'images / {，* /} *。{webp ，gif}'，
'styles / fonts /{,*/}*.*'，
'bower_components / sass-bootstrap / fonts /*.*'
] 
 }] 
}，
 styles：{
 expand：true，
 dot：true，
 cwd：'<％= yeoman.app％> / styles '，
 dest：'.tmp / styles /'，
 src：'{，* /} *。css'
} 
}，
 modernizr：{
 devFile： '<％= yeoman.app％> /bower_components/modernizr/modernizr.js'，
 outputFile：'<％= yeoman.dist％> /bower_components/modernizr/modernizr.js'，
档案：[
'<％= yeoman.dist％> / scripts / {，* /} *。js'，
'<％= yeoman.dist％> /样式/{,*/}*.css'，
'！<％= yeoman.dist％> / scripts / vendor / *'
]，
 uglify：true 
 $，b $ b并发：{
服务器：[
'指南针'，
'咖啡：dist'，
'复制：样式'
]， 
测试：[
'咖啡'，
'复制：样式'
]，
 dist：[
'咖啡'，
'指南针'，
'复制：样式'，
'imagem in'，
'svgmin'，
'htmlmin'
] 
}，
 bower：{
 options：{
 exclude： 'modernizr'] 
}，
 all：{
 rjsConfig：'<％= yeoman.app％> /scripts/main.js'
} 
 } 
}）; 
 
 grunt.registerTask（'server'，function（target）{
 if（target ==='dist'）{
 return grunt.task.run（['build '，'connect：dist：keepalive']）; 
} 
 
 grunt.task.run（[$ b $'clean：s​​erver'，$ b $''configureProxies'， 
'concurrent：server'，
'autoprefixer'，
'connect：livereload'，
'watch'
]）; 
}）; 
 
 grunt.registerTask（'test'，[
'clean：s​​erver'，
'concurrent'test'，$ b $'autoprefixer'，
' connect：test'，
'mocha'
]）; 
 
 grunt.registerTask（'build'，[
'clean：dist'，
'useminPrepare'，
'concurrent'dist'，
' autoprefixer'，
'requirejs'，
'concat'，
'cssmin'，$ b $'uglify'，
'modernizr'，
'copy： dist'，
'rev'，
'usemin'
]）; 
 
 grunt.registerTask（'default'，[
'jshint'，
'test'，
'build'
]）; 
  

};

编辑：这里是我的最后工作GruntFile

  //在2013-10-06使用generator-webapp生成0.4.3 
'use严格'; 
 
 var proxySnippet = require（'grunt-connect-proxy / lib / utils'）。proxyRequest; 
 var mountFolder = function（connect，dir）{
 return connect.static（require（'path'）。resolve（dir））; 
}; 
 
 //＃Globbing 
 //出于性能原因，我们只匹配一个级别：
 //'test / spec / {，* /} *。js' 
 //如果要递归匹配所有子文件夹，请使用它：
 //'test / spec / ** / *。js'
 
 module.exports = function（grunt ）{
 //显示最后流逝的时间
 require（'time-grunt'）（grunt）; 
 //载入所有grunt任务
 require（'load-grunt-tasks'）（grunt）; 
 
 grunt.initConfig（{
 //可配置路径
 yeoman：{
 app：'app'，
 dist：'dist'
}，
 watch：{
 compass：{
 files：['<％= yeoman.app％> / styles / {，* /} *。{scss，sass} ']，
 tasks：['compass：server'，'autoprefixer'] 
}，
 styles：{
 files：['<％= yeoman.app％> ; 
 options，['copy：styles'，'autoprefixer'] 
}，
 livereload：{
 options; / styles / {，* /} *。css']，
 tasks ：{
 livereload：'<％= connect.options.livereload％>'
}，
 files：[
'<％= yeoman.app％> /*.html'，
'.tmp / styles / {，* /} *。css'，
'{.tmp，<％= yeoman.app％>} / scripts / { ，* /} *。js'，
 '<％= yeoman.app％> / images / {，* /} *。{png，jpg，jpeg，gif，webp，svg}'
] 
} 
} ，
 connect：{
 options：{
 port：9000，
 livereload：35729，
 //将其更改为'0.0.0.0'以从服务器访问外部
主机名：'localhost'
}，
代理：[
 {
上下文：'/ api'，
主机：'localhost'，
 port：4000，
 https：false 
} 
]，
 livereload：{
 options：{
 open：true，
 base：[
'.tmp'，
'<％= yeoman.app％>'
]，
中间件：函数（connect）{
 return [
 proxySnippet，
 mountFolder（connect，'.tmp'），
 mountFolder（connect，'app'）
]; 
} 
} 
}，
 test：{
 options：{
 base：[
'.tmp'，
 'test'，
'<％= yeoman.app％>'
] 
} 
}，
 dist：{
 options：{ 
 open：true，
 base：'<％= yeoman.dist％>'
} 
} 
}，
 clean：{
 dist：{
文件：[{
 dot：true，
 src：[
'.tmp'，
'<％= yeoman.dist ％> / *'，
'！<％= yeoman.dist％> /。git *'
] 
}] 
}，
 server ： .tmp'
}，
 jshint：{
选项：{
 jshintrc：'.jshintrc'
}，
全部：[
 'gruntfile.js'，
'<％= yeoman.app％> / scripts / {，* /} *。js'，
'！<％= yeoman.app％> / scripts / vendor / *'，
'test / spec / {，* /} *。js'
] 
}，
摩卡：{
 all： {
 options：{
 run：true，
 urls：['http：//<％= connect.test.options.hostname％>：<％= connect.test .options.port％> /index.html'] 
} 
} 
}，
指南针：{
选项：{
 sassDir：' <％= yeoman.app％> / styles'，
 cssDir：'.tmp / styles'，
 generatedImagesDir：'.tmp / images / generated'，
 imagesDir：'<％= yeoman.app％> / images'，
 javascriptsDir：'<％= yeoman.app％> / scripts'，
 fontsDir：'<％= yeoman .app％> / styles / fonts'，
 importPath：'<％= yeoman.app％> / bower_components'，
 httpImagesPath：'/ images'，
 httpGeneratedImagesPath：' / images / generated'，
 httpFontsPath：'/ styles / fonts'，
 relativeAssets：false，
 assetCacheBuster：false 
}，
 dist：{
选项：{
 generatedImagesDir：'<％= yeoman.dist％> / images / generated'
} 
}，
服务器：{
 options： {
 debugInfo：true 
} 
} 
}，
 autoprefixer：{
 options：{
b rowsers：['last 1 version'] 
}，
 dist：{
 files：[{
 expand：true，
 cwd：'.tmp / styles / '，
 src：'{，* /} *。css'，
 dest：'.tmp / styles /'
}] 
} 
}，
 //未使用，因为Uglify任务确实是concat，
 //但如果需要仍然可用
 / * concat：{
 dist：{} 
}，* / 
 requirejs：{
 dist：{
 //选项：https：//github.com/jrburke/r.js/blob/master/build/example.build.js 
选项：{
 //`name`和`out`由grunt-usemin设置
 baseUrl：'<％= yeoman.app％> / scripts'，
 optimize：' none'，
 // TODO：找出如何使源代码与grunt-usemin 
一起工作// https://github.com/yeoman/grunt-usemin/issues/30 
 // generateSourceMaps：true，
 //需要支持SourceMaps 
 // http：// requirejs .org / docs / errors.html＃sourcemapcomments 
 preserveLicenseComments：false，
 useStrict：true，
 wrap：true 
 // uglify2：{} // https：// github .com / mishoo / UglifyJS2 
} 
} 
}，
 rev：{
 dist：{
 files：{
 src：[ 
'<％= yeoman.dist％> / scripts / {，* /} *。js'，
'<％= yeoman.dist％> / styles / {，* / } * .css'，
'<％= yeoman.dist％> / images / {，* /} *。{png，jpg，jpeg，gif，webp}'，
'< ;％= yeoman.dist％> / styles / fonts /{,*/}*.*'
 ] 
} 
} 
}，
 useminPrepare：{
 options：{
 dest：'<％= yeoman.dist％>'
}，
 html：'<％= yeoman.app％> /index.html'
}，
 usemin：{
 options：{
 dirs：['<％= yeoman.dist％>'] 
}，
 html：['<％= yeoman.dist％> / {，* /} *。html ']，
 css：['<％= yeoman.dist％> / styles / {，* /} *。css'] 
}，
 imagemin：{
 dist：{
 files：[{
 expand：true，
 cwd：'<％= yeoman.app％> / images'，
 src：'{ * /} *。{png，jpg，jpeg}'，
 dest：'<％= yeoman.dist％> / images'
}] 
} 
} ，
 svgmin：{
 dist：{
文件：[{
 expand：true，
 cwd：'<％= yeoman.app％> / images'，
 src：'{，* /} *。svg'， 
 dest：'<％= yeoman.dist％> / images'
}] 
} 
}，
 cssmin：{
 //如果您不希望Usemin 
 //块用于您的CSS，则此任务已预先配置。默认情况下，
 //``index.html`中的Usemin块将处理缩小，例如
 // 
 //<！ -  build：css（{。tmp，app}）styles / main.css  - > 
 // 
 // dist：{
 //文件：{
 //'<％= yeoman.dist％> /styles/main.css'：[ 
 //'.tmp / styles / {，* /} * .css'，
 //'<％= yeoman.app％> / styles / {，* /} * .css '
 //] 
 //} 
 //} 
}，
 htmlmin：{
 dist：{
 options：{
 / * removeCommentsFromCDATA：true，
 // https://github.com/yeoman/grunt-usemin/issues/44 
 // collapseWhitespace：true，
 collapseBooleanAttributes：true， 
 removeAttributeQuotes：true，
 removeRedundantAttributes：true，
 useShortDoctype：true，
 removeEmptyAttributes：true，
 removeOptionalTags：true * / 
 }，
 files：[{
 expand：true，
 cwd：'<％= yeoman.app％>'，
 src：'* .html'，
 dest：'<％= yeoman.dist％>'
}] 
} 
}，
 //将未在其他任务中处理的文件放在这里
 copy：{
 dist：{
 files：[{
 expand：true，
 dot：true，
 cwd：'<％= yeoman.app ％>'，
 dest：'<％= yeoman.dist％>'，
 src：[
'*。{ico，png，txt}'，
'.htaccess'，
'images / {，* /} *。{webp，gif}'，
'styles / fonts /{,*/}*.*'，
 'bower_components / sass-bootstrap / fonts /*.*'，
 templates /{,*/}*.*'
] 
}] 
}，
样式：{
展开：true，
 dot：true ，
 cwd：'<％= yeoman.app％> / styles'，
 dest：'.tmp / styles /'，
 src：'{，* /} *。 css'
} 
}，
 concurrent：{
 server：[
'compass'，
'copy：styles'
]， 
 test：[
'copy：styles'
]，
 dist：[
'compass'，
'copy'styles'，
'imagemin'，
'svgmin'，
'htmlmin'
] 
}，
 bower：{
选项：{
排除：['modernizr'] 
}，
全部：{
 rjsConfig：'<％= yeoman.app％> /scripts/main.js'
} 
} 
}）; 
 
 grunt.registerTask（'server'，function（target）{
 if（target ==='dist'）{
 return grunt.task.run（['build '，'connect：dist：keepalive']）; 
} 
 
 grunt.task.run（[$ b $'clean：s​​erver'，$ b $''configureProxies'， 
'concurrent：server'，
'autoprefixer'，
'connect：livereload'，
'watch'
]）; 
}）; 
 
 grunt.registerTask（'test'，[
'clean：s​​erver'，
'concurrent'test'，$ b $'autoprefixer'，
' connect：test'，
'mocha'
]）; 
 
 grunt.registerTask（'build'，[
'clean：dist'，
'useminPrepare'，
'concurrent'dist'，
' autoprefixer'，
'requirejs'，
'concat'，
'cssmin'，
'uglify'，
'copy'dist'，
' rev'，
'usemin'
]）; 
 
 grunt.registerTask（'default'，[
'jshint'，
'test'，
'build'
]）; 
}; 
  

解决方案

更改connect livereload目标，如下所示：

  livereload：{
 options：{
 open：true，
 base：[
 '.tmp'，
 yeomanConfig.app 
]，
中间件：函数（connect）{
 return [
 proxySnippet，
 connect.static（require （'path'）。resolve（'app'）），
 connect.static（require（'path'）。resolve（'。tmp'））
]; 
} 
} 
} 
  

I have installed the yeoman webapp generator and I am trying to set up a proxy to another server.

I installed the proxy with the following. npm install grunt-connect-proxy --save-dev

When I run grunt server, it shows

Running "configureProxies" task
Proxy created for: /people to localhost:3000 

It then directs me to a page running on localhost:9000 which says "Cannot GET /" There is a server running at localhost:3000 and I have tried other domains with no succes.

Here is my Gruntfile.js

// Generated on 2013-10-01 using generator-webapp 0.4.2
'use strict';

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;


// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {
// show elapsed time at the end
require('time-grunt')(grunt);
// load all grunt tasks
require('load-grunt-tasks')(grunt);

// configurable paths
var yeomanConfig = {
    app: 'app',
    dist: 'dist'
};

grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
        coffee: {
            files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
            tasks: ['coffee:dist']
        },
        coffeeTest: {
            files: ['test/spec/{,*/}*.coffee'],
            tasks: ['coffee:test']
        },
        compass: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
            tasks: ['compass:server', 'autoprefixer']
        },
        styles: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
            tasks: ['copy:styles', 'autoprefixer']
        },
        livereload: {
            options: {
                livereload: '<%= connect.options.livereload %>'
            },
            files: [
                '<%= yeoman.app %>/*.html',
                '.tmp/styles/{,*/}*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
                '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
        }
    },
    connect: {
        options: {
            port: 9000,
            livereload: 35729,
            // change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        proxies: [
            {
                context: '/people',
                host: 'localhost',
                port: 3000
            }
        ],
        livereload: {
            options: {
                open: true,
                base: [
                    '.tmp',
                    yeomanConfig.app
                ],
                middleware: function (connect) {
                    return [
                        proxySnippet
                    ];
                }
            }
        },
        test: {
            options: {
                base: [
                    '.tmp',
                    'test',
                    yeomanConfig.app
                ]
            }
        },
        dist: {
            options: {
                open: true,
                base: yeomanConfig.dist
            }
        }
    },
    clean: {
        dist: {
            files: [{
                dot: true,
                src: [
                    '.tmp',
                    '<%= yeoman.dist %>/*',
                    '!<%= yeoman.dist %>/.git*'
                ]
            }]
        },
        server: '.tmp'
    },
    jshint: {
        options: {
            jshintrc: '.jshintrc'
        },
        all: [
            'Gruntfile.js',
            '<%= yeoman.app %>/scripts/{,*/}*.js',
            '!<%= yeoman.app %>/scripts/vendor/*',
            'test/spec/{,*/}*.js'
        ]
    },
    mocha: {
        all: {
            options: {
                run: true,
                urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
            }
        }
    },
    coffee: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/scripts',
                src: '{,*/}*.coffee',
                dest: '.tmp/scripts',
                ext: '.js'
            }]
        },
        test: {
            files: [{
                expand: true,
                cwd: 'test/spec',
                src: '{,*/}*.coffee',
                dest: '.tmp/spec',
                ext: '.js'
            }]
        }
    },
    compass: {
        options: {
            sassDir: '<%= yeoman.app %>/styles',
            cssDir: '.tmp/styles',
            generatedImagesDir: '.tmp/images/generated',
            imagesDir: '<%= yeoman.app %>/images',
            javascriptsDir: '<%= yeoman.app %>/scripts',
            fontsDir: '<%= yeoman.app %>/styles/fonts',
            importPath: '<%= yeoman.app %>/bower_components',
            httpImagesPath: '/images',
            httpGeneratedImagesPath: '/images/generated',
            httpFontsPath: '/styles/fonts',
            relativeAssets: false
        },
        dist: {
            options: {
                generatedImagesDir: '<%= yeoman.dist %>/images/generated'
            }
        },
        server: {
            options: {
                debugInfo: true
            }
        }
    },
    autoprefixer: {
        options: {
            browsers: ['last 1 version']
        },
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/styles/',
                src: '{,*/}*.css',
                dest: '.tmp/styles/'
            }]
        }
    },
    // not used since Uglify task does concat,
    // but still available if needed
    /*concat: {
        dist: {}
    },*/
    requirejs: {
        dist: {
            // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
            options: {
                // `name` and `out` is set by grunt-usemin
                baseUrl: yeomanConfig.app + '/scripts',
                optimize: 'none',
                // TODO: Figure out how to make sourcemaps work with grunt-usemin
                // https://github.com/yeoman/grunt-usemin/issues/30
                //generateSourceMaps: true,
                // required to support SourceMaps
                // http://requirejs.org/docs/errors.html#sourcemapcomments
                preserveLicenseComments: false,
                useStrict: true,
                wrap: true
                //uglify2: {} // https://github.com/mishoo/UglifyJS2
            }
        }
    },
    rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
                    '<%= yeoman.dist %>/styles/fonts/{,*/}*.*'
                ]
            }
        }
    },
    useminPrepare: {
        options: {
            dest: '<%= yeoman.dist %>'
        },
        html: '<%= yeoman.app %>/index.html'
    },
    usemin: {
        options: {
            dirs: ['<%= yeoman.dist %>']
        },
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
    },
    imagemin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.{png,jpg,jpeg}',
                dest: '<%= yeoman.dist %>/images'
            }]
        }
    },
    svgmin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.svg',
                dest: '<%= yeoman.dist %>/images'
            }]
        }
    },
    cssmin: {
        // This task is pre-configured if you do not wish to use Usemin
        // blocks for your CSS. By default, the Usemin block from your
        // `index.html` will take care of minification, e.g.
        //
        //     <!-- build:css({.tmp,app}) styles/main.css -->
        //
        // dist: {
        //     files: {
        //         '<%= yeoman.dist %>/styles/main.css': [
        //             '.tmp/styles/{,*/}*.css',
        //             '<%= yeoman.app %>/styles/{,*/}*.css'
        //         ]
        //     }
        // }
    },
    htmlmin: {
        dist: {
            options: {
                /*removeCommentsFromCDATA: true,
                // https://github.com/yeoman/grunt-usemin/issues/44
                //collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true*/
            },
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>',
                src: '*.html',
                dest: '<%= yeoman.dist %>'
            }]
        }
    },
    // Put files not handled in other tasks here
    copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.{webp,gif}',
                    'styles/fonts/{,*/}*.*',
                    'bower_components/sass-bootstrap/fonts/*.*'
                ]
            }]
        },
        styles: {
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
        }
    },
    modernizr: {
        devFile: '<%= yeoman.app %>/bower_components/modernizr/modernizr.js',
        outputFile: '<%= yeoman.dist %>/bower_components/modernizr/modernizr.js',
        files: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            '!<%= yeoman.dist %>/scripts/vendor/*'
        ],
        uglify: true
    },
    concurrent: {
        server: [
            'compass',
            'coffee:dist',
            'copy:styles'
        ],
        test: [
            'coffee',
            'copy:styles'
        ],
        dist: [
            'coffee',
            'compass',
            'copy:styles',
            'imagemin',
            'svgmin',
            'htmlmin'
        ]
    },
    bower: {
        options: {
            exclude: ['modernizr']
        },
        all: {
            rjsConfig: '<%= yeoman.app %>/scripts/main.js'
        }
    }
});

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'configureProxies',
        'concurrent:server',
        'autoprefixer',
        'connect:livereload',
        'watch'
    ]);
});

grunt.registerTask('test', [
    'clean:server',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'mocha'
]);

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'requirejs',
    'concat',
    'cssmin',
    'uglify',
    'modernizr',
    'copy:dist',
    'rev',
    'usemin'
]);

grunt.registerTask('default', [
    'jshint',
    'test',
    'build'
]);

};

EDIT: here is my final working GruntFile

// Generated on 2013-10-06 using generator-webapp 0.4.3
'use strict';

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {
    // show elapsed time at the end
    require('time-grunt')(grunt);
    // load all grunt tasks
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        // configurable paths
        yeoman: {
            app: 'app',
            dist: 'dist'
        },
        watch: {
            compass: {
                files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
                tasks: ['compass:server', 'autoprefixer']
            },
            styles: {
                files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
                tasks: ['copy:styles', 'autoprefixer']
            },
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    '<%= yeoman.app %>/*.html',
                    '.tmp/styles/{,*/}*.css',
                    '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
                    '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
                ]
            }
        },
        connect: {
            options: {
                port: 9000,
                livereload: 35729,
                // change this to '0.0.0.0' to access the server from outside
                hostname: 'localhost'
            },
            proxies: [
                {
                    context: '/api',
                    host: 'localhost',
                    port: 4000,
                    https: false
                }
            ],
            livereload: {
                options: {
                    open: true,
                    base: [
                        '.tmp',
                        '<%= yeoman.app %>'
                    ],
                    middleware: function (connect) {
                        return [
                            proxySnippet,
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, 'app')
                        ];
                    }
                }
            },
            test: {
                options: {
                    base: [
                        '.tmp',
                        'test',
                        '<%= yeoman.app %>'
                    ]
                }
            },
            dist: {
                options: {
                    open: true,
                    base: '<%= yeoman.dist %>'
                }
            }
        },
        clean: {
            dist: {
                files: [{
                    dot: true,
                    src: [
                        '.tmp',
                        '<%= yeoman.dist %>/*',
                        '!<%= yeoman.dist %>/.git*'
                    ]
                }]
            },
            server: '.tmp'
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            all: [
                'Gruntfile.js',
                '<%= yeoman.app %>/scripts/{,*/}*.js',
                '!<%= yeoman.app %>/scripts/vendor/*',
                'test/spec/{,*/}*.js'
            ]
        },
        mocha: {
            all: {
                options: {
                    run: true,
                    urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html']
                }
            }
        },
        compass: {
            options: {
                sassDir: '<%= yeoman.app %>/styles',
                cssDir: '.tmp/styles',
                generatedImagesDir: '.tmp/images/generated',
                imagesDir: '<%= yeoman.app %>/images',
                javascriptsDir: '<%= yeoman.app %>/scripts',
                fontsDir: '<%= yeoman.app %>/styles/fonts',
                importPath: '<%= yeoman.app %>/bower_components',
                httpImagesPath: '/images',
                httpGeneratedImagesPath: '/images/generated',
                httpFontsPath: '/styles/fonts',
                relativeAssets: false,
                assetCacheBuster: false
            },
            dist: {
                options: {
                    generatedImagesDir: '<%= yeoman.dist %>/images/generated'
                }
            },
            server: {
                options: {
                    debugInfo: true
                }
            }
        },
        autoprefixer: {
            options: {
                browsers: ['last 1 version']
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: '.tmp/styles/',
                    src: '{,*/}*.css',
                    dest: '.tmp/styles/'
                }]
            }
        },
        // not used since Uglify task does concat,
        // but still available if needed
        /*concat: {
            dist: {}
        },*/
        requirejs: {
            dist: {
                // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
                options: {
                    // `name` and `out` is set by grunt-usemin
                    baseUrl: '<%= yeoman.app %>/scripts',
                    optimize: 'none',
                    // TODO: Figure out how to make sourcemaps work with grunt-usemin
                    // https://github.com/yeoman/grunt-usemin/issues/30
                    //generateSourceMaps: true,
                    // required to support SourceMaps
                    // http://requirejs.org/docs/errors.html#sourcemapcomments
                    preserveLicenseComments: false,
                    useStrict: true,
                    wrap: true
                    //uglify2: {} // https://github.com/mishoo/UglifyJS2
                }
            }
        },
        rev: {
            dist: {
                files: {
                    src: [
                        '<%= yeoman.dist %>/scripts/{,*/}*.js',
                        '<%= yeoman.dist %>/styles/{,*/}*.css',
                        '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
                        '<%= yeoman.dist %>/styles/fonts/{,*/}*.*'
                    ]
                }
            }
        },
        useminPrepare: {
            options: {
                dest: '<%= yeoman.dist %>'
            },
            html: '<%= yeoman.app %>/index.html'
        },
        usemin: {
            options: {
                dirs: ['<%= yeoman.dist %>']
            },
            html: ['<%= yeoman.dist %>/{,*/}*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
        },
        imagemin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>/images',
                    src: '{,*/}*.{png,jpg,jpeg}',
                    dest: '<%= yeoman.dist %>/images'
                }]
            }
        },
        svgmin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>/images',
                    src: '{,*/}*.svg',
                    dest: '<%= yeoman.dist %>/images'
                }]
            }
        },
        cssmin: {
            // This task is pre-configured if you do not wish to use Usemin
            // blocks for your CSS. By default, the Usemin block from your
            // `index.html` will take care of minification, e.g.
            //
            //     <!-- build:css({.tmp,app}) styles/main.css -->
            //
            // dist: {
            //     files: {
            //         '<%= yeoman.dist %>/styles/main.css': [
            //             '.tmp/styles/{,*/}*.css',
            //             '<%= yeoman.app %>/styles/{,*/}*.css'
            //         ]
            //     }
            // }
        },
        htmlmin: {
            dist: {
                options: {
                    /*removeCommentsFromCDATA: true,
                    // https://github.com/yeoman/grunt-usemin/issues/44
                    //collapseWhitespace: true,
                    collapseBooleanAttributes: true,
                    removeAttributeQuotes: true,
                    removeRedundantAttributes: true,
                    useShortDoctype: true,
                    removeEmptyAttributes: true,
                    removeOptionalTags: true*/
                },
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>',
                    src: '*.html',
                    dest: '<%= yeoman.dist %>'
                }]
            }
        },
        // Put files not handled in other tasks here
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.app %>',
                    dest: '<%= yeoman.dist %>',
                    src: [
                        '*.{ico,png,txt}',
                        '.htaccess',
                        'images/{,*/}*.{webp,gif}',
                        'styles/fonts/{,*/}*.*',
                        'bower_components/sass-bootstrap/fonts/*.*',
                        'templates/{,*/}*.*'
                    ]
                }]
            },
            styles: {
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>/styles',
                dest: '.tmp/styles/',
                src: '{,*/}*.css'
            }
        },
        concurrent: {
            server: [
                'compass',
                'copy:styles'
            ],
            test: [
                'copy:styles'
            ],
            dist: [
                'compass',
                'copy:styles',
                'imagemin',
                'svgmin',
                'htmlmin'
            ]
        },
        bower: {
            options: {
                exclude: ['modernizr']
            },
            all: {
                rjsConfig: '<%= yeoman.app %>/scripts/main.js'
            }
        }
    });

    grunt.registerTask('server', function (target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'clean:server',
            'configureProxies',
            'concurrent:server',
            'autoprefixer',
            'connect:livereload',
            'watch'
        ]);
    });

    grunt.registerTask('test', [
        'clean:server',
        'concurrent:test',
        'autoprefixer',
        'connect:test',
        'mocha'
    ]);

    grunt.registerTask('build', [
        'clean:dist',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'requirejs',
        'concat',
        'cssmin',
        'uglify',
        'copy:dist',
        'rev',
        'usemin'
    ]);

    grunt.registerTask('default', [
        'jshint',
        'test',
        'build'
    ]);
};

解决方案

Change the connect livereload target as follows:

livereload: {
  options: {
    open: true,
    base: [
      '.tmp',
      yeomanConfig.app
    ],
    middleware: function (connect) {
      return [
        proxySnippet,
        connect.static(require('path').resolve('app')),
        connect.static(require('path').resolve('.tmp'))
      ];
    }
  }
}

这篇关于与grunt连接代理yeoman webapp不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！