nodejs游戏源码解析:《球球大作战》的gulp工具使用

2017年5月7日 阅读:95

运行游戏使用的命令是gulp run,agar.io-clones使用了nodejs开发,gulp是基于nodejs的一个工具,它能够批量的做一些文件操作。gulp run意思是执行目录下gulpfile.js下的run任务,那么源码中使用了gulp的哪些功能呢?这篇文章将会做个简单介绍。

gulp能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并检测文件变化。在实现上,gulp鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入。

关于gulp入门,可以参考下面的文章:
http://www.ydcss.com/archives/18
http://www.gulpjs.com.cn/docs/getting-started/

一、一个最简单的示例

要使用gulp根据,当然得先安装它,有两种方式安装,对应于不同的命令参数。
全局安装gulp:
npm install –global gulp
作为项目的开发依赖(devDependencies)安装:
npm install –save-dev gulp

现在新建一个目录并创建一个名为 gulpfile.js 的文件,在里面编写如下代码

在目录下执行gulp,此时程序会搜寻目录下gulpfile.js文件中的默认(default)任务,也就是上面代码中“// 将你的默认的任务代码放在这”处的代码去执行。“gulp run”即表示执行名为run的任务,相关代码可以在项目文件夹下的gulpfile.js中看到。相关代码如下

二、代码解析

要看懂上面的代码,必须要了解gulp的一些API,知道“nodemon”等单词到底是什么意思,实现什么功能,gulp的api可以参考下面的文章:http://www.ydcss.com/archives/424

1、依赖

上面代码中的“gulp.task(‘run’, [‘build’], function (){}”意为run依赖于build,当执行gulp run时,程序会先执行build任务,再执行run任务。

2、nodemon

先看看nodemon,详细的解释可以参考https://www.npmjs.com/package/gulp-nodemon。

nodemon 是一个工具,用于项目代码发生变化时可以自动重启,nodemon 本意时检测项目变化的,对项目做监控的。重启只是它的一个功能。在上面的代码中,相当于执行./server/server.js这个文件。而这个文件其实是build任务中生成的。

3、build任务

接下来看看build任务是什么样子的,会发现build任务依赖于build-client、build-server、test、todo这4个任务,也就是说,需要按顺序先执行这4个任务,才会执行build。此时我们会发现,代码的执行流程是build-client、build-server、test、todo、run:
gulp.task(‘build’, [‘build-client’, ‘build-server’, ‘test’, ‘todo’]);

(1)build-client任务

build-client处理了客户端代码的创建,它用到了uglify、webpack和babel 。

其中uglify表示压缩javascript文件,减小文件大小(参见http://www.ydcss.com/archives/54)

webpack表示模块打包,它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件(参考 http://www.cnblogs.com/xz1024/p/5853794.html)

babel是一个JavaScript转换编译器,它可以将ES6(下一代JavaScript规范,添加了一些新的特性和语法)转换成ES5(可以在浏览器中运行的代码)。这就意味你可以在一些暂时还不支持某些ES6特性的浏览器引擎中,使用ES6的这些特性。比如说,class和箭头方法。

pipe表示管道,下面的代码是指将源文件(.src)“src/client/js/app.js”通过uglify方法压缩,然后将压缩后的结果通过webpack打包,然后通过babel做兼容性,最后通过将文件存入dest指定的目录下“bin/client/js/”

webpack()方法的参数是“require(‘./webpack.config.js’) ”“ ./webpack.config.js”,该文件的内容如下,它是打包的配置文件。

“build-client”依赖于“lint”和“move-client”,先要完成这两个任务,程序才会执行“build-client”任务。

(2)lint任务

“lint”任务如下所示,它使用了jshint方法。jshint是用来检测javascript的语法错误的。如果有错误,就报告fail。

(3)move-client任务

“build-client”还依赖于“move-client”代码如下,它只是移动一些文件

(4)build-server任务

build-server任务比较简单,它也是复制下文件

(5)test任务

build任务依赖于build-client、build-server、test和todo任务,在建了客户端和服务端文件后,自然需要对它测试一下,test任务调用了mocha方法,它是一个测试方法。

(6)todo任务

todo任务调用了todo方法,该方法会收集符合“src/**/*js”匹配符的文件信息,生成一个名为TODO.md的文件。

生成的TODO.md如下图所示。

由于实际运行的文件在是bin/目录下,如果修改了源文件,需要重新执行gulp run才能生效。

欢迎关注笔者出版的书籍《Unity3D网络游戏实战》,本书充分地讲解怎样开发一款网络游戏,特别对网络框架设计、网络协议、数据处理等方面都有详细的描述,相信会是一本好书的。

作者:碧俐千仞
转载请注明出处:http://weidublog.com/index.php/2017/05/07/670/

1 评论

  • 香港服务器 2017年5月20日在下午4:28

    沙发稳稳地坐好,不错