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

时间:2014-06-18 14:23:39

标签: cordova hook minify

我在某处读到,如果在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文件夹中的文件之后但在特定于平台的项目构建文件中引用它们之前,如何执行缩小构建操作?

2 个答案:

答案 0 :(得分:5)

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

我调用了新的挂钩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_wwwparser.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);
    });
});

答案 1 :(得分:4)

根据Cordova official网站:以下方法是建议使用来使用挂钩。

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

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

<强>钩/

  

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

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

  1. 来自 / hooks 的应用程序挂钩;
  2. 来自 config.xml ;
  3. 的应用程序挂钩
  4. 插件来自插件 /.../ plugin.xml
  5. 请记住:让您的脚本可执行。

    支持以下挂钩类型:

    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'目录

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

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

    (2)Config.xml

    可以使用元素在项目的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. 通过钩子示例
    3. 替换文本,具体取决于环境(DEV,PROD,UAT)
    4. 通过挂钩示例复制图标和启动画面
    5. http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

      强烈建议您阅读以下内容: