问题起源

可能Cocos Creator软件的开发人员认为每个开发者都是有两个电脑屏幕的(苦笑);

它的脚本检测逻辑是:

当你改动完脚本文件后,切换到Cocos Creator面板,此时才会触发预览更新,如果你是双屏的话,就不用切换,一个屏幕打开Cocos Creator,一个屏幕打开vscode,然后vscode保存后就会自动更新,此时切换到浏览器预览,一切都是那么的正常,前提你得有两块屏幕。

非常蛋疼!!!这真是一个糟糕的体验!

如果我们是单屏,你vscode改动脚本保存后,还得切换到Cocos Creator软件上,然后再切到浏览器去查看,超恶心有没有,怎么会有这种体验,都2022年了,文件改动检测居然还得开发者主动去触发。

but!!你说官方没有给你解决这个问题,但是他有提供一个很莫名其妙的教程:《使用 VS Code 激活脚本编译》

他告诉你,windows用户需要先安装cUrl命令,然后再在Cocos Creator的顶部找到开发者选项 ---> Visual Studio Code工作流 ---> 添加编译任务;

点击后,啥反应没有,但是会在项目目录的.vscode目录下,生成一个tasks.json文件,其文件内容如下:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Cocos Creator compile",
      "command": "curl",
      "args": ["http://localhost:7456/asset-db/refresh"],
      "type": "shell",
      "isBackground": true,
      "group": "build",
      "presentation": {
        "reveal": "always"
      }
    }
  ]
}

可能不同的电脑其端口会有不同。

然后我们在vscode中按下快捷键:ctrl + p回车后,输入task CocosCreator compile;此时就会触发脚本的重新编译,再去浏览器查看,预览项目就会自动刷新了。主要注意的是这不是常驻任务,是一次性的,也就是说,如果你再次改动了脚本,想要直接去浏览器查看,就得再来一遍。

但是!但是啊!我们需要的是自动检测文件改动并更新啊,都2022年,工程化处理这么薄弱吗???难道每改动一次就得来一遍ctrl + p输入巴拉巴拉的命令吗?

我觉得是时候做出改变了!

教程

在以我们已经完成cUrl命令安装和本地已经生成tasks.json文件为前提下!!

在vsode插件市场查找插件:Run on Save

注意啊!是搜索结果的第二个插件哦!

不知道我也提供一下在线插件地址:Run on Save

安装它。

安装完后,在.vscode目录下新增settings.json文件,如果有这个文件就不用新建了。

往该文件插入一下内容:

{
  "runOnSave.statusMessageTimeout": 3000,
  "runOnSave.commands": [
    {
      // Match scss files except names start with `_`.
      "match": ".*\\.ts$",
      "command": "curl http://localhost:7456/asset-db/refresh",
      "runIn": "terminal"
    }
  ]
}

其中command的内容中,那段http的地址,请自行去自己项目中的tasks.json文件中,找到args对应的那个地址,复制过来就行了。

此时,重启下vscode,我建议是重启,因为配置文件的更新不确定vscode能否动态检测到!

重启后,我们去改动项目的ts脚本文件,保存后就会触发预览项目的更新,建议是第一次预览再Cocos Creator面板中操作,然后剩下的脚本改动就正常使用了。

而上述配置的具体意思,其实还是很好理解的:

  1. match表示正则匹配的文件
  2. command 表示shell命令
  3. runIn 运行shell命令的程序,terminal表示使用vscode内置的。
  4. statusMessageTimeout 表示运行后命令展示的时间,我这里3秒后会自动关闭命令展示

还有更多可以自行查看插件文件,没多少,3分钟就看完了。

知道了这些配置,我们就可以新建更多的自定义文件监听了。

Save and Run

最近vscode更新之后上面那个软件无法正常使用了,不知道是不是个人原因,我又找了个新的插件 Save and Run

地址:Save and Run

使用方法也和上面那个差不多,安装成功后在tasks.json中拿到地址,然后配置如下内容:

{
"saveAndRun": {
    "commands": [
      {
        "match": "\\.ts$",
        "cmd": "curl http://localhost:7456/asset-db/refresh",
        "useShortcut": false,
        "silent": false
      }
    ]
  }
}

具体解释直接去插件文档看吧,很简单。

分类: Cocos Creator 标签: Cocos Creator脚本编译自动编译

评论

暂无评论数据

暂无评论数据

目录