我正在使用具有phalcon作为后端的cg-angular生成器创建Angular应用程序。我使用configureProxies连接后端和前端。我的Gruntfile.js是
Gruntfile.js
/*jslint node: true */
'use strict';
var pkg = require('./package.json');
var createFolderGlobs = function(fileTypePatterns) {
fileTypePatterns = Array.isArray(fileTypePatterns) ? fileTypePatterns : [fileTypePatterns];
var ignore = ['node_modules','bower_components','dist','temp'];
var fs = require('fs');
return fs.readdirSync(process.cwd())
.map(function(file){
if (ignore.indexOf(file) !== -1 ||
file.indexOf('.') === 0 ||
!fs.lstatSync(file).isDirectory()) {
return null;
} else {
return fileTypePatterns.map(function(pattern) {
return file + '/**/' + pattern;
});
}
})
.filter(function(patterns){
return patterns;
})
.concat(fileTypePatterns);
};
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
connect: {
proxies: [{
context: ['/'],
host: '0.0.0.0',
port: 80,
https: false,
changeOrigin: true
}],
main: {
options: {
port: 9001,
hostname: '0.0.0.0',
directory: '.',
livereload: 35730
}
},
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;
}
}
}
},
watch: {
main: {
options: {
livereload: 35730,
livereloadOnError: false,
spawn: false
},
files: [createFolderGlobs(['*.js','*.less','*.html']),'!_SpecRunner.html','!.grunt'],
tasks: [] //all the tasks are run dynamically during the watch event handler
}
},
jshint: {
main: {
options: {
jshintrc: '.jshintrc'
},
src: createFolderGlobs('*.js')
}
},
clean: {
before:{
src:['dist','temp']
},
after: {
src:['temp']
}
},
less: {
production: {
options: {
},
files: {
'temp/app.css': 'app.less'
}
}
},
ngtemplates: {
main: {
options: {
module: pkg.name,
htmlmin:'<%= htmlmin.main.options %>'
},
src: [createFolderGlobs('*.html'),'!index.html','!_SpecRunner.html'],
dest: 'temp/templates.js'
}
},
copy: {
main: {
files: [
{src: ['img/**'], dest: 'dist/'},
{src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/',filter:'isFile',expand:true},
{src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/',filter:'isFile',expand:true}
//{src: ['bower_components/angular-ui-utils/ui-utils-ieshiv.min.js'], dest: 'dist/'},
//{src: ['bower_components/select2/*.png','bower_components/select2/*.gif'], dest:'dist/css/',flatten:true,expand:true},
//{src: ['bower_components/angular-mocks/angular-mocks.js'], dest: 'dist/'}
]
}
},
dom_munger:{
read: {
options: {
read:[
{selector:'script[data-concat!="false"]',attribute:'src',writeto:'appjs'},
{selector:'link[rel="stylesheet"][data-concat!="false"]',attribute:'href',writeto:'appcss'}
]
},
src: 'index.html'
},
update: {
options: {
remove: ['script[data-remove!="false"]','link[data-remove!="false"]'],
append: [
{selector:'body',html:'<script src="app.full.min.js"></script>'},
{selector:'head',html:'<link rel="stylesheet" href="app.full.min.css">'}
]
},
src:'index.html',
dest: 'dist/index.html'
}
},
cssmin: {
main: {
src:['temp/app.css','<%= dom_munger.data.appcss %>'],
dest:'dist/app.full.min.css'
}
},
concat: {
main: {
src: ['<%= dom_munger.data.appjs %>','<%= ngtemplates.main.dest %>'],
dest: 'temp/app.full.js'
}
},
ngAnnotate: {
main: {
src:'temp/app.full.js',
dest: 'temp/app.full.js'
}
},
uglify: {
main: {
src: 'temp/app.full.js',
dest:'dist/app.full.min.js'
}
},
htmlmin: {
main: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
files: {
'dist/index.html': 'dist/index.html'
}
}
},
karma: {
options: {
frameworks: ['jasmine'],
files: [ //this files data is also updated in the watch handler, if updated change there too
'<%= dom_munger.data.appjs %>',
'bower_components/angular-mocks/angular-mocks.js',
createFolderGlobs('*-spec.js')
],
logLevel:'ERROR',
reporters:['mocha'],
autoWatch: false, //watching is handled by grunt-contrib-watch
singleRun: true
},
all_tests: {
browsers: ['PhantomJS','Chrome','Firefox']
},
during_watch: {
browsers: ['PhantomJS']
},
}
});
grunt.registerTask('build',['jshint','clean:before','less','dom_munger','ngtemplates','cssmin','concat','ngAnnotate','uglify','copy','htmlmin','clean:after']);
grunt.registerTask('serve', ['dom_munger:read','jshint','configureProxies:server', 'connect:livereload', 'watch']);
grunt.registerTask('test',['dom_munger:read','karma:all_tests']);
grunt.event.on('watch', function(action, filepath) {
//https://github.com/gruntjs/grunt-contrib-watch/issues/156
var tasksToRun = [];
if (filepath.lastIndexOf('.js') !== -1 && filepath.lastIndexOf('.js') === filepath.length - 3) {
//lint the changed js file
grunt.config('jshint.main.src', filepath);
tasksToRun.push('jshint');
//find the appropriate unit test for the changed file
var spec = filepath;
if (filepath.lastIndexOf('-spec.js') === -1 || filepath.lastIndexOf('-spec.js') !== filepath.length - 8) {
spec = filepath.substring(0,filepath.length - 3) + '-spec.js';
}
//if the spec exists then lets run it
if (grunt.file.exists(spec)) {
var files = [].concat(grunt.config('dom_munger.data.appjs'));
files.push('bower_components/angular-mocks/angular-mocks.js');
files.push(spec);
grunt.config('karma.options.files', files);
tasksToRun.push('karma:during_watch');
}
}
//if index.html changed, we need to reread the <script> tags so our next run of karma
//will have the correct environment
if (filepath === 'index.html') {
tasksToRun.push('dom_munger:read');
}
grunt.config('watch.main.tasks',tasksToRun);
});
};
当我运行grunt服务器时,它说
运行&#34; configureProxies:server&#34; (configureProxies)任务 代理创建:/到0.0.0.0:80
运行&#34;连接:livereload&#34; (连接)任务 已开始在http://localhost:8000
上连接网络服务器
当我在浏览器中遇到我的php后端时,它会显示我编码的json数据。在我的角度应用程序中有获取请求($ http.get(&#39; url&#39;)。success(function(data){log.console(data)});)但我崩溃到localhost:9001它&#39 ; s给出错误
ERR_CONNECTION_REFUSED
我的gruntfile出了什么问题?我该如何解决这个问题?。
答案 0 :(得分:0)
经过一些研究和讨论,我可以解决问题。问题出在grunt文件中。即使我已将连接选项设置为端口9001,它也会在端口8000上运行,因为我得到了chrome错误所以我将grunt文件连接部分更改为这样。
connect: {
proxies: [{
context: ['/api'],
host: '0.0.0.0',
port: 80,
https: false,
changeOrigin: true
}],
//In here I remove the main:{}
options: {
port: 9001,
hostname: '0.0.0.0',
directory: '.',
livereload: 35730
},
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;
}
}
}
},
我也像这样改变服务器任务的加载顺序。并将更重要的任务放在开头,如“configureProxies:server”和“connect:livereload”
grunt.registerTask('serve', ['configureProxies:server', 'connect:livereload','dom_munger:read','jshint', 'watch']);
这些更改对我有用,并且在我的浏览器中运行良好。