使用Grunt实现资源自动化同步

最新推荐文章于 2020-06-24 17:41:24 发布

晓衡的成长日记

最新推荐文章于 2020-06-24 17:41:24 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/6346289/article/details/100037170

版权

本文介绍了如何利用Grunt自动化框架实现Cocos Creator游戏项目的资源同步，包括UI资源、动画资源、图集合并的同步，并展示了如何配置Gruntfile和任务脚本，以提高开发效率。

摘要由CSDN通过智能技术生成

同步美术、策划资源是日常开发中极为频繁的事情，shawn借用Web前端的一些思想和工具，将Grunt自动化框架引入Cocos Creator项目，可以实现相对高效地将图片、动画、配置、音效等游戏资源导入到客户端工程中。

grunt介绍

在开始之前先用简单介绍一下Grunt是什么：

640?wx_fmt=png

为什么选择使用Grunt做自动化工具，简单总结以下几点：

使用JavaScript语言，与Cocos Creator开发使用相同的语言，减少学习成本
插件丰富，6000+（本篇文章只介绍两个grunt-sync和grunt-shell）
使用json配置插件完成任务，没有太多逻辑条件，使用简单容易上手，当配置好一个模块后，其它模块可以依葫芦画瓢，策划人员也可以上手配置
Grunt基于Nodejs，可以借用大量插件与npm模块实现各种复杂需求
跨平台

安装grunt与插件

首先，使用npm安装全局grunt-cli工具:

&gt;npm install grunt-cli -g

然后在项目根目录初始化npm的包管理文件package.json：

&gt;npm init

输入npm init后一路回车，然后在项目中安装grunt npm模块：

&gt;npm install grunt --save-dev

grunt只是一个自动化框架，我们这里还需要安装上面说的两个插件

&gt;npm install grunt-sync --save-dev   //文件同步插件	
&gt;npm install grunt-shell --save-dev  //shell插件

Grunt任务模块目录结构

安装好Grunt的命令行、插件后，在项目根目录创建Gruntfile.js文件，这是Grunt自动任务的入口文件。同时在根项目新建一个tools目录，用于存放各种与项目有关的工具或脚本，再添加一个grunt-task目录，用于存放具体的grunt任务配置脚本，请看下图：

640?wx_fmt=png

上图中xxx-task.js就是各子模块的自动化任务。

Gruntfile

shawn在早期使用Grunt时，将所有任务都编写在Gruntfile.js文件，当模块越来越多，维护起来越来越困难，因此将不同模块的自动化任务独立开来，在Gruntfile.js进行统一加载和任务注册，下面看下Gruntfile文件的内容：

//引入rd模块读取文件	
let rd = require('rd');	
//获./tools/grunt-task目录下取所有文件	
let taskScripts = rd.readFileSync('./tools/grunt-task');	
module.exports = (grunt) =&gt; {	
    //我们这里使用了grunt-shel&amp;grunt-sync插件	
    //下面shell与sync对象分别用于收集两种任务配置	
    let shell = {};	
    let sync = {};	
    //将grunt设置为全局变量	
    global.grunt = grunt;	
    //require所有任务模块，放入tasks数组	
    let tasks = [];	
    taskScripts.forEach((script) =&gt; {	
        let task = require(script);	
        if (task.init) {	
            //让task对象自己填充sync和shell内容	
            task.init(sync, shell);	
            tasks.push(task);	
        }	
    });	
    //配置sync、shell两大任务	
    grunt.initConfig({	
        sync,	
        shell,	
    });	
    //注册grunt-shell插件，用于执行外部shell命令	
    grunt.loadNpmTasks('grunt-shell');	
    //注册grunt-sync插件，用于本地文件同步	
    grunt.loadNpmTasks('grunt-sync');	
    //注册自定义的grunt任务	
    tasks.forEach(task =&gt; task.r