Node学习笔记（四）：gulp+express+io.socket部署angularJs2（填坑篇）

这篇就先暂停下上篇博客--你画我猜的进度，因为在做这个游戏的时候，想采用最新的ng2技术，奈何坑是一片又一片，这边就先介绍下环境部署和填坑史

既然要用ng2，首先要拿到资源，我这边用的是angularJs2 beta版的，网上的资源有两种，一个是文件全压缩版的.min.js版的另一个就是一大堆乱七八糟的js文件，主要是ng2已经完全采用TypeScript，加之对es6的支持，所以需要引入一大堆兼容，编译文件

这边刚好特别手欠想学学gulp，于是开搞配置gulp环境，压缩所有的js文件成一个min.js文件

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify");

gulp.task("default",function(){
    return gulp.src([
            "src/angular2-polyfills.js",
            "src/system.js",
            "src/typescript.js",
            "src/Rx.js",
            "src/angular2.dev.js",
            "src/http.dev.js",
            "src/router.dev.js",
            "src/tsloader.js",
            "src/system.config.js"
        ])
    .pipe(concat("angular2.beta.stack.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("dist"));
});

玩完gulp，又把grunt玩了一遍，不得不说事物必有其存在的道理，丰富的库支持给了grunt巨大的使用市场，而gulp的语法精简，学习周期也大大缩短使其拥有更大的前景，啧啧，用完就两个字，爽！

碎碎念完，开始说说express+io.socket配置，socket.io配置就不多说了，在上一篇你画我猜讲的很清楚了，传送门，这边我之所以引入express模块的原因，只有一个：路由！！

因为node配置非常底层，路由还需要自己写，比如我访问natureless:8100是没有问题的，因为我在server.js中配置了端口的指向

var app = require('http').createServer(handler);
function handler (req, res) {
  console.log(req);
  fs.readFile(__dirname + '/app.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

而我想访问与app.html作为同级目录出现的index.html，通过natureless.cn:8100/index.html访问是无效的因为node拿到get数据index.html他不知道该如何处理，需要自己手动配置，开始的时候，我的想法是对req的消息进行处理，很有耐心的fs.readFile(__dirname+'XX路径')，但是邂逅度娘后，知道express有专门针对静态文件访问的中间件express.static()

app.use(express.static('src'));

这样我们把我们的template都可以放在src中，通过我们熟悉的相对路径就可以访问，引用文件了，这边把服务端的代码贴上

var express=require('express');
var app=express();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
var fs = require('fs');
app.use(express.static('src'));

app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "app.html" );
})
http.listen(8100,function(){
    console.log('Natureless server begin...');
});

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('startConnect', function (data) {
    io.sockets.emit('news',data);
  });
});

其实之所以有如此多的问题，主要源于环境是node配置，我在引入ng2时，只要牵涉路径的问题就各种报错，比如templateUrl

下面贴上app.html代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript" src="/js/angular2.beta.stack.min.js"></script>
</head>
<body>
    <ez-app></ez-app>
    <script type="text/typescript">
        import {Component} from "angular2/core";
        import {bootstrap} from "angular2/platform/browser";

        @Component({
            selector:"ez-app",
            templateUrl : '/view/gameRoom.html'
        })
        class EzApp{}

        bootstrap(EzApp);
    </script>
</body>
</html>

卡在templateUrl整整三天，各种采坑，最愚笨的问题莫过8100端口上还用80端口上的相对路径，明显跨域，你画我猜的主体框架算是搞定了。。。。。唔，人家的那叫编程之旅，我这叫填坑之旅啊，哈哈