2016-01-29 175 views
0

我想通過grunt和nodemon運行角度管理模板和節點服務器。所有運行良好。問題是當我嘗試從客戶端發送任何請求到服務器端其顯示404錯誤。對於這兩個我使用相同的端口是2300.如果我更改server.js的端口號然後它返回結果..我不能運行它們在同一端口。我發送請求http://localhost:2300/testGrunt Connect,Nodemon相同的端口問題

這裏是我的Gruntfile:

// Generated on 2015-01-21 using generator-angular 0.9.2 
 
'use strict'; 
 

 
// # 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) { 
 

 
    // Load grunt tasks automatically 
 
    require('load-grunt-tasks')(grunt); 
 

 
    
 
    // Time how long tasks take. Can help when optimizing build times 
 
    require('time-grunt')(grunt); 
 

 
    // Configurable paths for the application 
 
    var appConfig = { 
 
    app: require('./bower.json').appPath || 'app', 
 
    dist: 'dist' 
 
    }; 
 

 
    // Define the configuration for all the tasks 
 
    grunt.initConfig({ 
 

 
    // Project settings 
 
    yeoman: appConfig, 
 

 
    // Watches files for changes and runs tasks based on the changed files 
 
    watch: { 
 
     bower: { 
 
     files: ['bower.json'], 
 
     tasks: ['wiredep'] 
 
     }, 
 
     js: { 
 
     files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
 
     tasks: ['newer:jshint:all'], 
 
     options: { 
 
      livereload: '<%= connect.options.livereload %>' 
 
     } 
 
     }, 
 
     jsTest: { 
 
     files: ['test/spec/{,*/}*.js'], 
 
     tasks: ['newer:jshint:test', 'karma'] 
 
     }, 
 
     styles: { 
 
     files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 
 
     tasks: ['newer:copy:styles', 'autoprefixer'] 
 
     }, 
 
     gruntfile: { 
 
     files: ['Gruntfile.js'] 
 
     }, 
 
     livereload: { 
 
     options: { 
 
      livereload: '<%= connect.options.livereload %>' 
 
     }, 
 
     files: [ 
 
      '<%= yeoman.app %>/{,*/}*.html', 
 
      '.tmp/styles/{,*/}*.css', 
 
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
 
     ] 
 
     } 
 
    }, 
 

 
    // The actual grunt server settings 
 
    connect: { 
 
     options: { 
 
     port: 2300, 
 
     // Change this to '0.0.0.0' to access the server from outside. 
 
     hostname: 'localhost', 
 
     livereload: 35729 
 
     }, 
 
     livereload: { 
 
     options: { 
 
      open: true, 
 
      middleware: function (connect) { 
 
      return [ 
 
       connect.static('.tmp'), 
 
       connect().use(
 
       '/bower_components', 
 
       connect.static('./bower_components') 
 
      ), 
 
       connect.static(appConfig.app) 
 
      ]; 
 
      } 
 
     } 
 
     }, 
 
     test: { 
 
     options: { 
 
      port: 9001, 
 
      middleware: function (connect) { 
 
      return [ 
 
       connect.static('.tmp'), 
 
       connect.static('test'), 
 
       connect().use(
 
       '/bower_components', 
 
       connect.static('./bower_components') 
 
      ), 
 
       connect.static(appConfig.app) 
 
      ]; 
 
      } 
 
     } 
 
     }, 
 
     dist: { 
 
     options: { 
 
      open: true, 
 
      base: '<%= yeoman.dist %>' 
 
     } 
 
     } 
 
    }, 
 

 
    // Make sure code styles are up to par and there are no obvious mistakes 
 
    jshint: { 
 
     options: { 
 
     jshintrc: '.jshintrc', 
 
     reporter: require('jshint-stylish') 
 
     }, 
 
     all: { 
 
     src: [ 
 
      'Gruntfile.js', 
 
      '<%= yeoman.app %>/scripts/{,*/}*.js' 
 
     ] 
 
     }, 
 
     test: { 
 
     options: { 
 
      jshintrc: 'test/.jshintrc' 
 
     }, 
 
     src: ['test/spec/{,*/}*.js'] 
 
     } 
 
    }, 
 

 
    // Empties folders to start fresh 
 
    clean: { 
 
     dist: { 
 
     files: [{ 
 
      dot: true, 
 
      src: [ 
 
      '.tmp', 
 
      '<%= yeoman.dist %>/{,*/}*', 
 
      '!<%= yeoman.dist %>/.git*' 
 
      ] 
 
     }] 
 
     }, 
 
     server: '.tmp' 
 
    }, 
 

 
    // Add vendor prefixed styles 
 
    autoprefixer: { 
 
     options: { 
 
     browsers: ['last 1 version'] 
 
     }, 
 
     dist: { 
 
     files: [{ 
 
      expand: true, 
 
      cwd: '.tmp/styles/', 
 
      src: '{,*/}*.css', 
 
      dest: '.tmp/styles/' 
 
     }] 
 
     } 
 
    }, 
 

 
    // Renames files for browser caching purposes 
 
    filerev: { 
 
     dist: { 
 
     src: [ 
 
      '<%= yeoman.dist %>/scripts/{,*/}*.js', 
 
      '<%= yeoman.dist %>/styles/{,*/}*.css', 
 
      '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
 
      '<%= yeoman.dist %>/styles/fonts/*' 
 
     ] 
 
     } 
 
    }, 
 

 
    // Reads HTML for usemin blocks to enable smart builds that automatically 
 
    // concat, minify and revision files. Creates configurations in memory so 
 
    // additional tasks can operate on them 
 
    useminPrepare: { 
 
     html: '<%= yeoman.app %>/index.html', 
 
     options: { 
 
     dest: '<%= yeoman.dist %>', 
 
     flow: { 
 
      html: { 
 
      steps: { 
 
       js: ['concat', 'uglifyjs'], 
 
       css: ['cssmin'] 
 
      }, 
 
      post: {} 
 
      } 
 
     } 
 
     } 
 
    }, 
 

 
    // Performs rewrites based on filerev and the useminPrepare configuration 
 
    usemin: { 
 
     html: ['<%= yeoman.dist %>/{,*/}*.html'], 
 
     css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
 
     options: { 
 
     assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images'] 
 
     } 
 
    }, 
 

 
    // The following *-min tasks will produce minified files in the dist folder 
 
    // By default, your `index.html`'s <!-- Usemin block --> will take care of 
 
    // minification. These next options are pre-configured if you do not wish 
 
    // to use the Usemin blocks. 
 
    cssmin: { 
 
     dist: { 
 
     files: [{ 
 
      expand: true, 
 
      cwd: '<%= yeoman.dist %>', 
 
      src: 'styles/*.css', 
 
      dest: '<%= yeoman.dist %>' 
 
     }] 
 
     } 
 
    }, 
 
    uglify: { 
 
     build: { 
 
     files: [{ 
 
      expand: true, 
 
      src: '**/*.js', 
 
      dest: '<%= yeoman.dist %>/scripts', 
 
      cwd: '<%= yeoman.app %>/scripts' 
 
     }] 
 
     }, 
 
     options: { 
 
     mangle:false 
 
     }, 
 
    }, 
 
    // concat: { 
 
    // dist: {} 
 
    // }, 
 

 
    imagemin: { 
 
     dist: { 
 
     files: [{ 
 
      expand: true, 
 
      cwd: '<%= yeoman.app %>/images', 
 
      src: '{,*/}*.{png,jpg,jpeg,gif}', 
 
      dest: '<%= yeoman.dist %>/images' 
 
     }] 
 
     } 
 
    }, 
 

 
    svgmin: { 
 
     dist: { 
 
     files: [{ 
 
      expand: true, 
 
      cwd: '<%= yeoman.app %>/images', 
 
      src: '{,*/}*.svg', 
 
      dest: '<%= yeoman.dist %>/images' 
 
     }] 
 
     } 
 
    }, 
 

 
    htmlmin: { 
 
     dist: { 
 
     options: { 
 
      collapseWhitespace: true, 
 
      conservativeCollapse: true, 
 
      collapseBooleanAttributes: true, 
 
      removeCommentsFromCDATA: true, 
 
      removeOptionalTags: true 
 
     }, 
 
     files: [{ 
 
      expand: true, 
 
      cwd: '<%= yeoman.dist %>', 
 
      src: '**/*.html', 
 
      dest: '<%= yeoman.dist %>' 
 
     }] 
 
     } 
 
    }, 
 

 
    // ngAnnotate tries to make the code safe for minification automatically by 
 
    // using the Angular long form for dependency injection. It doesn't work on 
 
    // things like resolve or inject so those have to be done manually. 
 
    ngAnnotate: { 
 
     dist: { 
 
     files: [{ 
 
      expand: true, 
 
     cwd: '<%= yeoman.app %>/scripts', 
 
      src: '**/*.js', 
 
     dest: '<%= yeoman.dist %>/scripts', 
 
     }] 
 
     } 
 
    }, 
 

 
    // Replace Google CDN references 
 
    cdnify: { 
 
     dist: { 
 
     html: ['<%= yeoman.dist %>/*.html'] 
 
     } 
 
    }, 
 

 
    // Copies remaining files to places other tasks can use 
 
    copy: { 
 
     dist: { 
 
     files: [{ 
 
      expand: true, 
 
      dot: true, 
 
      cwd: '<%= yeoman.app %>', 
 
      dest: '<%= yeoman.dist %>', 
 
      src: [ '**'] 
 
     },{ 
 

 
      expand:true, 
 
      cwd:'bower_components', 
 
      dest:'<%= yeoman.dist %>/bower_components', 
 
      src:['**'] 
 
     } , 
 

 
     { 
 
      expand: true, 
 
      cwd: '.tmp/images', 
 
      dest: '<%= yeoman.dist %>/images', 
 
      src: ['generated/*'] 
 
     }, { 
 
      expand: true, 
 
      cwd: 'bower_components/bootstrap/dist', 
 
      src: 'fonts/*', 
 
      dest: '<%= yeoman.dist %>' 
 
     }] 
 
     }, 
 
     styles: { 
 
     expand: true, 
 
     cwd: '<%= yeoman.app %>/styles', 
 
     dest: '.tmp/styles/', 
 
     src: '{,*/}*.css' 
 
     } 
 
    }, 
 

 
    // watch our node server for changes 
 
    nodemon: { 
 
     dev: { 
 
     script: 'server.js', 
 
     options: { 
 
      env: { 
 
      PORT: process.env.PORT || 2300 
 
      } 
 
      
 
     } 
 
     } 
 
    }, 
 

 

 
    // Run some tasks in parallel to speed up the build process 
 
    concurrent: { 
 
     options: { 
 
     logConcurrentOutput: true 
 
     }, 
 
     server: [ 
 
     'copy:styles 
 
     ], 
 
     test: [ 
 
     'copy:styles' 
 
     ], 
 
     dist: [ 
 
     'copy:styles', 
 
     'imagemin', 
 
     'svgmin' 
 
     ] 
 
    }, 
 

 
    // Test settings 
 
    karma: { 
 
     unit: { 
 
     configFile: 'test/karma.conf.js', 
 
     singleRun: true 
 
     } 
 
    } 
 
    }); 
 

 
    grunt.loadNpmTasks('grunt-nodemon'); 
 

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

 
    grunt.task.run([  
 
     'clean:server', 
 
     'concurrent:server', 
 
     'autoprefixer', 
 
     'connect:livereload', 
 
     'nodemon',   
 
     'watch' 
 
    ]); 
 
    }); 
 
    
 
    grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) { 
 
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
 
    grunt.task.run(['serve:' + target]); 
 
    }); 
 

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

 
    grunt.registerTask('build', [ 
 
    'clean:dist', 
 
    'concurrent:dist', 
 
    'copy:dist', 
 
    'cssmin', 
 
    'ngAnnotate', 
 
    'uglify', 
 
    'htmlmin', 
 
    'concurrent:tasks' 
 
    ]); 
 

 
    grunt.registerTask('default', [ 
 
    'newer:jshint', 
 
    'test', 
 
    'build', 
 
    'concurrent:tasks' 
 
    ]); 
 
};

這裏是我的節點server.js文件:

'use strict'; 
 
var express = require("express"); 
 
var app \t = express(); 
 
var mongoose = require('mongoose'); 
 
var config = require("./config"); 
 

 
var User = require('./api/auth/auth.model'); 
 
mongoose.connect(config.mongoUri).connection; 
 

 
var port = 2300; 
 
var bodyParser = require("body-parser"); 
 
//var http = require('http').Server(app); 
 
//app.use(express.static(__dirname +'app')); 
 
app.use(bodyParser.urlencoded({ 
 
    extended: true 
 
})); 
 
app.use(bodyParser.json()); 
 
    
 
app.get('/test', function(req, res, next) { 
 
    res.json({user:'working'}); 
 
}); 
 
require('./routes')(app,passport); 
 

 
app.listen(port,function(){ 
 
\t console.log("Server is running on port - "+ port); 
 

 
});

這裏是輸出:

enter image description here

enter image description here

回答

-1

你不應該使用連接(如要運行一個Web服務器爲你),如果你使用的節點。你最好去grunt-nodemon

看看這個,我刪除了連接並應用了grunt nodemon(提前使用的解決方案),並且工作正常(保持我以前的其他分鐘,sass等任務)。

https://github.com/ChrisWren/grunt-nodemon#advanced-usage

concurrent: { 
    dev: { 
    tasks: ['nodemon', 'node-inspector', 'watch'], 
    options: { 
     logConcurrentOutput: true 
    } 
    } 
}, 
nodemon: { 
    dev: { 
    script: 'index.js', 
    options: { 
     nodeArgs: ['--debug'], 
     env: { 
     PORT: '5455' 
     }, 
     // omit this property if you aren't serving HTML files and 
     // don't want to open a browser tab on start 
     callback: function (nodemon) { 
     nodemon.on('log', function (event) { 
      console.log(event.colour); 
     }); 

     // opens browser on initial server start 
     nodemon.on('config:update', function() { 
      // Delay before server listens on port 
      setTimeout(function() { 
      require('open')('http://localhost:5455'); 
      }, 1000); 
     }); 

     // refreshes browser when server reboots 
     nodemon.on('restart', function() { 
      // Delay before server listens on port 
      setTimeout(function() { 
      require('fs').writeFileSync('.rebooted', 'rebooted'); 
      }, 1000); 
     }); 
     } 
    } 
    } 
}, 
watch: { 
    server: { 
    files: ['.rebooted'], 
    options: { 
     livereload: true 
    } 
    } 
}