将文件缩小集成到Cordova/Phonegap构建过程中

Question

我在某处读到,如果在Cordova/Phonegap应用程序中缩小Javascript文件,则会有明显的性能提升.

我决定将缩小脚本集成到我的构建过程中,但是我找不到适当的时刻和文件夹,可以安全地缩小文件.

显然,我不想在构建期间更改全局www文件夹中的文件,因为我们正在全局www文件夹中进行开发.

最有可能的是,在Cordova从全局www文件夹更新它们之后,我应该将缩小应用于每个平台的www文件夹中的文件(并且可能从merges文件夹合并一些平台特定的css ).这意味着,我无法使用cordova before_prepare hook - 这太早了,文件在特定于平台的www文件夹中还不存在.

因此我们留下了cordova after_prepare钩子脚本.我尝试过但失败了.在after_prepare时刻,cordova已经生成了特定于平台的项目文件.例如,Windows Phone csproj文件已经记录了最初位于全局www文件夹中的所有文件,如果我删除原始js文件并添加新的缩小捆绑包,则会收到有关失败的XAP打包的构建错误.

结论:before_prepare太早了,after_prepare为时已晚.

在更新平台www文件夹中的文件之后但在特定于平台的项目构建文件中引用它们之前,如何执行缩小构建操作？

Answer 1

最后,事实证明在Cordova的prepare.js文件中实现一个新的钩子并不是那么困难(在它位于的Windows上%appdata%\npm\node_modules\cordova\src).

我调用了新的钩子after_platform_www_prepare,在www准备文件夹之后但在生成特定于平台的配置文件之前,为每个平台调用一次.令人困惑的是Cordova的parser.update_www功能,因为对于Windows和WP平台,它有一个误导性的评论:

// Replace the www dir with contents of platform_www and app www and updates the csproj file.

在查看代码时,我发现这个函数实际上没有更新项目文件,还有另一个parser.update_project用于此目的的函数,它在prepare.js文件的最后分别调用 ,因此在我parser.update_www和parser.update_project调用之间添加自定义钩子似乎是安全的.

此外,我添加了一个自定义hacky解决方法,将当前正在处理的平台名称传递给钩子脚本.

之后,我创建hooks\after_platform_www_prepare了一个文件夹并创建了一个调用Grunt任务的脚本,该脚本依次连接并缩小CSS和JS文件,处理index.html以替换引用,最后删除先前引用的未压缩文件.我不会在这里发布我的Grunt任务 - 这是值得的另一个话题 - 但是我会用我的Corodva prepare.js修补程序发布相关的代码片段.它似乎工作正常,但我仍然不确定它不会破坏任何东西,所以使用风险自负.干得好:

// Replace the existing web assets with the app master versions
parser.update_www();
events.emit('log', 'Updated platform WWW folder for platform "' + platform + '"');

// pass only the current platform, use clone to avoid breaking the global options object
// hacky cloning, no time to look for better way, no extend available here...
var optionsPLatform = JSON.parse(JSON.stringify(options));
optionsPLatform.platforms = [platform];
// now the platform name will be available as process.env.CORDOVA_PLATFORMS in your hook scripts

// be warned that these hooks will execute in parallel for each platform!
// thus you should process only files for the current platform in your hook script 
// to avoid conflicts with other platforms
return hooks.fire('after_platform_www_prepare', optionsPLatform)
    .then(function () {
        events.emit('log', 'after_platform_www_prepare completed for platform "' + platform + '"');
        // .. some Cordova's code omitted for brevity

        return parser.update_project(cfg);
    });
});

Answer 2

根据Cordova 官方网站：以下方法是推荐使用钩子的方法。

使用 cordova-cli 构建的 Cordova 应用程序将具有以下目录结构：

myApp/
|-- config.xml
|-- hooks/
|-- merges/
| | |-- android/
| | |-- blackberry10/
| | `-- ios/
|-- www/
|-- platforms/
| |-- android/
| |-- blackberry10/
| `-- ios/
`-- plugins/

钩子/

此目录可能包含用于自定义cordova 命令的脚本。该目录曾经存在于.cordova/hooks，但现在已移至项目根目录。您添加到这些目录的任何脚本都将在与目录名称对应的命令之前和之后执行 。用于集成您自己的构建系统或与版本控制系统集成。

Cordova Hooks 代表特殊的脚本，可以由应用程序和插件开发人员添加，甚至可以由您自己的构建系统添加以自定义cordova 命令。钩子脚本可以通过将它们添加到特殊的预定义文件夹（/hooks）或通过配置文件（config.xml 和 plugin.xml）来定义，并按以下顺序连续运行：

1. 来自/hooks 的应用程序钩子；
2. 来自config.xml 的应用程序挂钩；
3. 来自 plugins /.../plugin.xml 的插件钩子。

请记住：使您的脚本可执行。

支持以下挂钩类型：

after_build/
after_compile/
after_docs/
after_emulate/
after_platform_add/
after_platform_rm/
after_platform_ls/
after_plugin_add/
after_plugin_ls/
after_plugin_rm/
after_plugin_search/
after_plugin_install/   <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
after_prepare/
after_run/
after_serve/
before_build/
before_compile/
before_docs/
before_emulate/
before_platform_add/
before_platform_rm/
before_platform_ls/
before_plugin_add/
before_plugin_ls/
before_plugin_rm/
before_plugin_search/
before_plugin_install/   <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
before_plugin_uninstall/   <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled
before_prepare/
before_run/
before_serve/
pre_package/ <-- Windows 8 and Windows Phone only.

定义钩子的方法

(1) 通过'/hooks'目录

要在触发相应的钩子类型时执行自定义操作，请使用钩子类型作为“钩子”目录中子文件夹的名称，并将脚本文件放在此处，例如：

# script file will be automatically executed after each build
hooks/after_build/after_build_custom_action.js

(2) 配置文件

钩子可以在项目的 config.xml 中使用元素定义，例如：

<hook type="before_build" src="scripts/appBeforeBuild.bat" />
<hook type="before_build" src="scripts/appBeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />

<platform name="wp8">
    <hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.bat" />
    <hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.js" />
    <hook type="before_plugin_install" src="scripts/wp8/appWP8BeforePluginInstall.js" />
    ...
</platform>

<platform name="windows8">
    <hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.bat" />
    <hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.js" />
    <hook type="before_plugin_install" src="scripts/windows8/appWin8BeforePluginInstall.js" />
    ...
</platform>

(3) 插件钩子（plugin.xml）

作为插件开发人员，您可以使用 plugin.xml 中的元素定义钩子脚本，如下所示：

<hook type="before_plugin_install" src="scripts/beforeInstall.js" />
<hook type="after_build" src="scripts/afterBuild.js" />

<platform name="wp8">
    <hook type="before_plugin_install" src="scripts/wp8BeforeInstall.js" />
    <hook type="before_build" src="scripts/wp8BeforeBuild.js" />
    ...
</platform>

before_plugin_install、after_plugin_install、before_plugin_uninstall插件钩子将专门为正在安装/卸载的插件触发。

使用源代码编写钩子的 3 个最佳示例

1. 通过 Hooks 示例添加插件：
2. 通过钩子示例根据环境（DEV、PROD、UAT）替换文本
3. 通过钩子示例复制图标和启动画面

http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

强烈建议阅读以下内容：

• https://github.com/apache/cordova-cli#project_commands
• https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md
• Cordova/PhoneGap 项目需要的三个钩子