Node学习笔记：gulp+express+io.socket部署angularJs2（填坑篇）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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端口上的相对路径，明显跨域，你画我猜的主体框架算是搞定了。。。。。唔，人家的那叫编程之旅，我这叫填坑之旅啊，哈哈
以上是关于Node学习笔记：gulp+express+io.socket部署angularJs2（填坑篇）的主要内容，如果未能解决你的问题，请参考以下文章