Grunt Connect，Nodemon同一端口问题 [英] Grunt Connect , Nodemon same port issue

问题描述

我试图通过grunt和nodemon运行角度管理模板和节点服务器。所有运行良好。问题是当我尝试从客户端向服务器端发送任何请求时显示404错误。对于这两个我使用相同的端口是2300.如果我更改server.js的端口号然后它返回结果..我不能运行它们在同一端口。我发送请求

如果您使用的是节点，请使用连接（就像您要为您运行Web服务器一样）。你应该更好地去grunt-nodemon

看看这个，我删除了connect并应用了grunt nodemon（提前使用的解决方案），并且工作正常（让我的其他mins，sass等任务）。

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

 并发：{
 dev：{
 tasks：['nodemon'，'node-inspector'，'watch']，
 options：{
 logConcurrentOutput：true 
} 
 
 
 $ nodemon {
 dev：{
 script：'index.js'，
 options：{
 nodeArgs： ['--debug']，
 env：{
 PORT：'5455'
}，
 //如果您不提供HTML文件，则省略此属性; 
 //不想在开始时打开浏览器标签
 callback：function（nodemon）{
 nodemon.on（'log'，function（event）{ 
 console.log（event.colour）; 
}）; 
 
 //在初始服务器启动时打开浏览器
 nodemon.on（'config：update'，function（）{
 //服务器侦听端口之前的延迟
 setTimeout（function（）{
 require（'open'）（'http：// localhost：5455'）; 
}，1000）; 
}）; 
 
 //在服务器重新启动时刷新浏览器
 nodemon.on（'restart'，function（）{
 //服务器侦听端口之前的延迟
 setTimeout（function （）{
 require（'fs'）。writeFileSync（'。rebooted'，'rebooted'）; 
}，1000）; 
}）; 
} 
} 
} 
}，
观看：{
服务器：{
文件：['.rebooted']，
选项：{
 livereload：true 
} 
} 
} 
  

I am trying to run angular admin template and node server by grunt and nodemon.All runs well..Problem is when i try to send any request from client-side to server-side its showing 404 error. For both i am using same port which is 2300. If i change the port number of server.js then it returns result..I can not run them by same port. I am sending request http://localhost:2300/test

Here is my 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'
  ]);
};

Here is my node server.js file :

'use strict';
var express = require("express");
var app 	= 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(){
	console.log("Server is running on port - "+ port);

});

Here is output :

解决方案

You shouldn't use connect (as is going to run a web server for you), if you're using node. You should better go to grunt-nodemon

Take a look to this, I removed connect and applied the grunt nodemon (advance usage solution), and worked fine (keeping my other mins, sass, etc tasks as before).

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
    }
  } 
}

这篇关于Grunt Connect，Nodemon同一端口问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！