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

Question

我在某处读到，如果在 Cordova/Phonegap 应用程序中缩小 Javascript 文件，性能会得到显着提升。

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

显然，我不想在构建过程中更改全局 www 文件夹中的文件，因为我们正在全局 www 文件夹中进行开发。

最有可能的是，在 Cordova 从全局 www 文件夹更新文件后，我应该对每个平台的 www 文件夹中的文件应用缩小(并且可能从 merges 文件夹合并一些平台特定的 css)。这意味着，我无法使用 cordova before_prepare Hook - 现在还为时过早，特定于平台的 www 文件夹中尚不存在文件。

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

结论:before_prepare 太早，after_prepare 太晚。

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

Answer 1

根据Cordova official site:以下方法是推荐的方法来使用钩子(Hook)。

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

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

Hook /

This directory may contains scripts used to customize cordova commands. This directory used to exist at .cordova/hooks, but has now been moved to the project root. Any scripts you add to these directories will be executed before and after the commands corresponding to the directory name. Useful for integrating your own build systems or integrating with version control systems.

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

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

记住:使您的脚本可执行。

支持以下钩子(Hook)类型:

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.

定义钩子(Hook)的方法

(1) 通过“/hooks”目录

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

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

(2)Config.xml

可以使用元素在项目的 config.xml 中定义 Hooks，例如:

<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)插件 Hook (plugin.xml)

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

<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插件 Hook 将专门针对正在安装/卸载的插件而触发。

用源代码编写钩子(Hook)的 3 个最佳示例

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

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
• Three hooks your Cordova/PhoneGap project needs