利用browserSync来跑nodejs的server

最近在搭一个angular的开发环境,后端nodejs+express,前端angular+ionic,构建工具是gulp,开始的想法是前端跑一个server,后端跑一个server,做好了之后感觉好麻烦,一次要跑两个server,然后就想着能不能合并,查了下有nodejs直接路由到angular的教程,地址 https://scotch.io/tutorials/use-expressjs-to-deliver-html-files#using-res.sendfile() ,这个不多说,然后遇到的问题是我本来前端用的browserSync,这样方便调试,但是怎么用browserSync来跑nodejs呢。

这里的解决办法就是在nodejs的server和browserSync的server之间加一个nodemon。大致代码如下:

app.js:


'use strict';

// simple express server
var express = require('express');
var app = express();
var router = express.Router();

app.use(express.static('public'));
app.get('/', function(req, res) {
    res.sendfile('./public/index.html');
});

app.listen(5000);

gulpfile.js:


'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');

gulp.task('default', ['browser-sync'], function () {
});

gulp.task('browser-sync', ['nodemon'], function() {
  browserSync.init(null, {
      proxy: "http://localhost:5000",
      files: ["public/**/*.*"],
      browser: "google chrome",
      port: 7000,
  });
});

gulp.task('nodemon', function (cb) {
  return nodemon({
    script: 'app.js'
  }).on('start', function () {
      cb();
  });
});

其中nodejs里监听的端口和browserSync里的proxy端口一致,browserSync的port再另设一个。现在跑起来基本上没有问题,后期在做的过程中有问题再修正。

参考:https://gist.github.com/sogko/b53d33d4f3b40d3b4b2e