根据climbing-marble项目来分析phaser项目打包接入微信平台的实现方法。

package.json 入口文件

scripts": {
    "dev": "grunt dev",
    "dist": "grunt dist",
    "custom": "grunt custom",
    "wechatdev": "grunt wechat-dev",
    "wechatdist": "grunt wechat-dist",
    "devqq": "grunt devqq"
  }

其中 "wechatdev": "grunt wechat-dev" 是微信平台的打包脚本文件,通过npm run wechatdev脚本来实现

grunt wechat-dev 脚本解读

通过grunt wechat-dev可以找到Gruntfile.js文件中的相应的配置。

 grunt.registerTask('wechat-dev', [
    //'tslint:dist',
    'replace:wechat',
    'copy:wechat',
    'writeWechatData',
    'concurrent:wechatdev'
]);

自定义任务名称为wechat-dev,执行流程以及分别对应的grunt插件如下

    'replace:wechat',
    'copy:wechat',
    'writeWechatData',
    'concurrent:wechatdev'

上面的replace,copy,concurrent等命令分别对应task/options/目录下面的js配置文件。

在concurrent.js文件中

module.exports = {
    options: {
        logConcurrentOutput: true
    },
    dev: ['watch:assets', 'watch:html', 'webpack:dev'],
    wechatdev: ['watch:wechat_assets', 'webpack:wechatdev'],
    wechatdist: ['watch:wechat_assets', 'webpack:wechatdist']
};

可以看到wechatdev,对应两个任务,watch:wechat_assets,webpack:wechatdev

webpack:wechatdev可以找到对应的文件

wechatdev: require('../webpack/wechatdev.config'),

writeWechatData任务解读

自定义的writeWechatData任务的具体实现。

grunt.registerTask('writeWechatData', 'Writes JSON and XML to variables', function () {
        let x2js = new X2JS();

        // let neusa_shadow = JSON.stringify(x2js.xml2js(grunt.file.read('assets/fonts/neusa_shadow.fnt')));
        // let neusa_regular = JSON.stringify(x2js.xml2js(grunt.file.read('assets/fonts/neusa_regular.fnt')));
        let tls = grunt.file.read('assets/atlases/interface.json');
        let tls2 = grunt.file.read('assets/atlases/boostAnimation.json');

        let data = //'window.neusa_shadow = ' + JSON.stringify(neusa_shadow) + '; \n' +
            //'window.neusa_regular = ' + JSON.stringify(neusa_regular) + ';\n' +
            'window.boostanimation = ' + JSON.stringify(tls2) + ';\n' +
            'window.interface = ' + JSON.stringify(tls) + ';';

        grunt.file.write('_build/wechat/data.js', data);
    });

读取项目中的json配置文件,再拼接上window.boostxxxxx头部以后,写入到_build/wechat/data.json文件中。

wechatdev.config解读