实用教程|使用gulp进行简单的自动化运行调试

感谢简书ID: 曾彬思同学友情提供

http://www.jianshu.com/p/6510bd31188f

参考资料: http://www.gulpjs.com.cn/

安装node.JS

搭建gulp的运行环境需要用到npm,所以我们需要先安装node.JS。

下载node.JS

【Node.JS官网】

https://nodejs.org/en

【node.JS中文网】

http://nodejs.cn/download

进入下载页面,找到系统对应的版本进行下载即可。
安装结束后,打开终端控制台,输入:

ec36a8e530b9c7345a9c740a72008c6c.png

5c73dd1adf915118b028fceb864e6876.jpeg

验证nodeJS是否安装成功

然后回车,控制台上回显示node的版本信息,如果没有显示,可以注销用户,或者重启计算机试试。

配置cnpm

由于npm安装插件是从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常)。所以咱们乐于助人的淘宝团队在国内搭建了一个国内服务器,实现了cnpm。

服务器地址是:http://npm.taobao.org

这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为10分钟一次以保证尽量与官方服务同步。

配置cnpm的方式也很简单,在终端控制台输入:

dd46643d04a67b48d9671e711c5fcab6.png

安装完成后,最好关闭终端控制台,然后重新打开使用。直接使用可能会引发错误。

cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm

使用“cnpm -v”可以查看cnpm的版本:

2a0ce7897b0b9118a61bb5d093e07747.png

b6d2e491c62878eb0678847381d16947.png

验证cnpm是否安装成功

全局安装gulp

为了能够在计算机上让gulp直行任务,所以我们需要全局安装gulp。在终端执行:b61230886c8652873734a1f25b0a8fd7.png

安装完成后,我们可以同样通过命令查看是否安装成功:e12b1c087129b581d8f8e6b7ce84a32b.png

由于我计算机上已经安装好了环境,这里就不截图演示了。

ae2a8941497f61931d752e4d615d3e57.png

验证gulp是否安装成功

创建gulp项目

我使用gulp注意是为了在Cocos2d-JS游戏开发过程中避免频繁的切换浏览器刷新,所以以下都是通过该项目进行描述。

新建package.json文件

首先,在控制台cd到指定项目的根目录:

b3a8d038e9ceeefb50b8c16972bb708d.png

进入项目根目录

然后输入:

4ebcd96825f1ae6922ed57b33cd07663.png

b02be0b5f655be37d363a5cfe1569c0e.jpeg

创建package.json

终端停止在上图所示的位置,这时候需要手动输入项目名称,如果直接回车,项目名称将会默认设置为光标前面那个括号里面的内容。

828fb72402af13abfbc3600f2b81acc0.jpeg

创建package.json

其实没有什么特殊的,我都是直接回车使用默认。
在“entry point: (main.js)”这一项的时候,我将名称改为“gulpfile.js”。主要是因为通常的JS项目一般都会包含“main.js”文件,为了区分开,所以这里使用了自定义的名称。

当光标停止在“Is this ok?(yes)”后面时,输入“y”回车即可。

package.json文件内容介绍

完成以上步骤,在项目的根目录就自动生成了一个文件,内容大概如下所示(根据个人配置会有一定的出入):

9fc8babba14b605e7ae146dc70ae7f90.jpeg

本地安装gulp

为了能正常使用,需要在项目下再次安装gulp。首先,确保终端控制台的工作空间在项目的根目录,然后执行:

e21144a57b2004977d5e9cbf3e75d388.png

abb5466e0666902d85cb23581c2db157.jpeg

本地安装gulp

安装完成后,会在项目的根目录生成一个“node_modules”的文件夹,所有通过npm(cnpm)本地化安装的模块文件都会在这个文件夹里面。

编写gulpfile.js文件

在项目的根目录新建一个“gulpfile.js”文件,文件名主要是根据pacakge.json里面配置的名称来定的,只有保证两边一致即可。

37e051010cf0f404b440fbb2b3adb4e5.png

创建gulpfile.js

在gulpfile.js中编辑一下代码:

4931e0e131dccfe4410c5e8dee2c3b0a.jpeg

由于刷新浏览器需要用到“browserSync”,所以我们一起将其require进来。

运行gulp

在VSCode上执行任务

运行gulp任务的方法有好多种,我开发Cocos2d JS是使用VSCode进行代码编辑的,在VSCode上,通过Command + P可以显示一个输入框,在输入框中输入“task ”后面跟一个空格,输入框下面的面板就会显示当前项目所有的gulp任务。选择对应的任务即可,当任务启动后,被gulp.watch()监听的目录文件内容发生变化时,浏览器就会进行一次刷新。所有每当写好一句代码,按下保存的时候,浏览器就会自动重新运行项目(需要两个屏幕进行开发,这样才够爽-_-)。

aeda00d9f7a142fcb75b5f27bf80ede4.jpeg

VSCode执行任务

在终端执行任务

在公司,开发是使用Quick-Cocos2d-x的,游戏效果也都是在quick-x-player上查看,这时候我的gulp是在终端控制台启动的。命令如下:

cac07f79773e186274e995d3281d0554.png

但是在执行命令的时候,确保终端控制台的工作空间在项目的根目录。

b08efec5fb125983e28d3d101e4b228f.png

终端执行任务

我终端执行的那个gulpfile.js文件内容如下(仅供参考):

5bec6a306b0b718c7a2273b8988b05fc.jpeg

ba55daa8d5fa2a6d9c304b08370d2cb3.png

这时候,一旦项目文件内容被更改,模拟器就会进行一次刷新。

往期精彩推荐

内测帖:Cocos Creator v1.5.0 beta-3下载试用

【知识分享】 获取网络状态、电池电量、屏幕截屏

Cocos论坛本周招聘汇总帖

怪兽大乱斗:进入苹果推荐的Creator独立游戏

Cocos Creator中实现相对地图运动的粒子系统

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值