维护PhoneGap混合/ Web应用程序代码库

Question

我正在研究维护跨平台（web，ios，android）phonegap代码库所涉及的复杂性，该代码库允许尽可能简单地使用平台特定代码（和资产/测试）。

我目前采用的最佳方法是使用grunt构建典型Web应用程序的代码，然后使用grunt-phonegap模块生成相应的phonegap项目。

我相信这会有效，但是对于我的phonegap项目，我知道我将需要使用一些专门编写的插件来利用一些设备功能（这些不是典型的cordova插件）

我想知道是否有人想出了一种方法来维护一个能够适应不同平台和要求的代码库。 Javascript没有#IF_DEF功能，但是可以使用grunt实现类似的功能吗？

Answer 1

我最近自己也有同样的问题。 我在网上找不到这个，所以我决定深入研究Grunt，Node和Git。

Grunt和Node

在我的Cordova项目的根文件夹中（除了www，平台，合并和插件文件夹），我有一个咕噜咕噜的项目。 我存储模块化的JavaScript文件和CSS文件，这些文件可能与平台相关，也可能不是在Cordova项目根目录内的src文件夹中。 这个grunt项目构建存储在src文件夹中的JavaScript和CSS，并根据需要将生成的文件放入www或merges文件夹中。

我甚至编写了一个grunt任务，通过优化和缩小css，javascript和html模板来构建应用程序，然后重建Cordova平台项目以包含这些生产文件。

因为JavaScript中没有#IF_DEF，所以我必须使用Grunt（如上所述）为每个平台构建JavaScript。 我通过平台模块化几乎所有的JavaScript函数。 如果该功能没有平台差异（没有本机挂钩），我只需要一个文件。 如果存在差异，我需要为该功能的每个平台创建一个单独的文件。 例如，我的Cordova onDeviceReady和onResume函数通常因平台而异。 我创建了名为的文件

CordovaEvents-ios.js and CordovaEvents-android.js

在package.json文件中，我在我的应用程序中描述了我想要的“功能”。 CordovaEvents是一个功能的示例。

我也支持“论据”。 我在模块化文件的文件名中使用上述相同的方法。 一个论点可能看起来像这样

CordovaEvents-ios--production.js and CordovaEvents-android--production.js

在这种情况下，生产应用程序中所需的代码将与非生产代码不同。 我可以在构建过程中简单地传递这个参数（或参数列表），并且将拾取并构建正确的文件。 我认为，如果有一种方法可以维护可以适应不同平台和要求的代码库，那么我认为这最能解决您的问题。 要求是要素名称和参数。 参数可以是你想要的任何东西，可能使用一个插件或另一个插件。

我还描述了我想要支持的平台（“iOS”，“Android”和“桌面”）。 Grunt在MultiTask中处理每个平台，然后查看我想要支持的功能。 它将尝试查找名为feature-platform.js的文件。 如果找不到此文件，它只会尝试查找feature.js。 在我将平台所需的所有功能连接在一起后，它会将文件复制到iOS或Android的merges文件夹中。 通常，保存在根项目中的WWW文件夹中的所有文件都可以在桌面上运行，因为没有本机Cordova挂钩...这允许我在Chrome中进行调试。 包含本机挂钩的所有文件都存储在merges文件夹中。 一旦为相应平台构建了Cordova项目，就可以在设备模拟器中测试代码。

如果您是Grunt的新手，我强烈建议您查看他们的入门指南。

http://gruntjs.com/getting-started

混帐

我也使用Git来编写我的代码版本。 我使用SourceTree在我的Cordova项目的根文件夹中创建Git存储库，并在我的Mac Mini服务器上有一个远程存储库，我也可以推送我的提交。 这允许我们拥有代码的备份副本，并使其成为我的团队也可以在带外处理代码。

我Git忽略以下文件夹：

• node_modules
• 插件
• 平台
• 插件

我的Cordova项目的根目录中包含的所有其他文件和文件夹都是版本化的。 我使用以下链接作为参考来帮助定义我的Cordova的Git策略：

https://leanpub.com/developingwithcordovacli/read#version-control

我没有在一夜之间把所有这些东西都弄清楚，事实上它需要花费两个多月的时间。 我希望我的答案可以作为您和其他人的指南，以解决您在开幕式中提到的问题。

Answer 2

我正在使用gruntjs，javascript，jade，bower和phonegap来构建混合Web应用程序和phonegap移动应用程序。 经过一番调查，我决定使用玉模板语言来创建我的html和javascript文件。 这是我的设置。

//begin grunt module
module.exports = function(grunt) {
var $jadeConfigObject = {
          compileDevelopment: {
            options: {
              pretty: true,
              data: {
                debug: true,
                **phonegap : '<%= isPhonegapBuild %>'**
              }
            },

            files: [{
              expand: true,
              cwd : "src",
              src: "**/*.jade",
              ext: ".html",
              dest:"dist/development/www/"

            }]
          }
    };

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: [$dist_folder,"www"],
    jade: $jadeConfigObject
     // other gruntjs tasks
  })


grunt.registerTask('setPhonegap', 'Set Phonegap related values.', function(n) {
  **grunt.config.set('isPhonegapBuild', true);**
});
 grunt.registerTask('buildPhonegap', ['setPhonegap','buildDevelopment'
,'copy:phonegap_www']);

}

现在解释

使用gruntjs setPhonegap任务来区分phonegap构建和普通的Web应用程序构建。 任务setPhonegap设置isPhonegapBuild配置属性，该属性反过来由jade配置对象使用。 然后我可以在jade文件中使用“ if phonegap ”语句。

我的jade布局文件中有以下行

include ../includes/mainJavascript.jade

mainJavascript.jade

if phonegap
  script(type='text/javascript',src='#{mainFolder}/cordova.js')
  script(type='text/javascript',src='#{mainFolder}/cordova_plugins.js')
  script(type='text/javascript',src='#{mainFolder}/plugins/org.apache.cordova.device/www/device.js')
  script(type='text/javascript',src='#{javascriptServicesFolder}/pushTokenService.js')
  script(type='text/javascript',src='#{javascriptFolder}/plugins/com.phonegap.plugins.PushPlugin/www/PushNotification.js')
  script(type='text/javascript',src='#{javascriptFolder}/phonegap/pushNotificationHelper.js')

这样我有以下功能

• 我的Web应用程序不包含任何与phonegap相关的脚本或HTML
• 我可以使用玉器布局（母版页）来轻松简化我的文件。
• 添加新的javascript到每个页面或更改应用程序中每个页面的每个html非常容易。

请注意，phonegap需要www文件夹作为其构建脚本，因此我创建了以下目录结构。

src -- every code file here, jade, javascript
www -- only created for phonegap build
dist/development/www -- normal development www build
dist/production/www -- production www build

我在源代码管理中忽略了www / *和dist / *。 我只使用src jade和javascript文件。 将此设置添加到凉亭，我相信这是一个不错的选择。