Question

我关注tutorial to make a production ready ionic app。我想丑化我的js。一切都很好，除了'离子生成android'生成一个apk，安装应用程序不运行。相同的代码运行'ionic serve --lab'和'ionic run android'。请帮忙。

代码运行于：'ionic serve -lab'和'离子运行android -l --debug'但不是'离子构建android'

我为异常处理添加了以下代码，是否有更好的方法来了解哪些运行时异常可能会导致这样的事情？

// catch exceptions out of angular
window.onerror = function(message, url, line, col, error) {
  var debug = true;
  var stopPropagation = debug ? false : true;
  var data = {
    type: 'javascript',
    url: window.location.hash,
    localtime: Date.now()
  };
  if (message) {
    data.message = message;
  }
  if (url) {
    data.fileName = url;
  }
  if (line) {
    data.lineNumber = line;
  }
  if (col) {
    data.columnNumber = col;
  }
  if (error) {
    if (error.name) {
      data.name = error.name;
    }
    if (error.stack) {
      data.stack = error.stack;
    }
  }

  if (debug) {
    console.log('exception', data);
    window.alert('Error: ' + data.message);
  } else {
    track('exception', data);
  }
  return stopPropagation;
};

编辑1 我在运行adb logcat时遇到了这个错误：

E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/css/social-icons.css
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/css/font-awesome.css
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/css/style-chetan.css
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/css/tabSlideBox.css
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/app.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/controllers.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/services.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/openfb.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/ngopenfb.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/collide.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/ionic.tdcards.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/mfb-directive.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/ng-cordova-oauth.min.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/ng-cordova.min.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/facebookConnectPlugin.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/tabSlideBox.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/templates.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/dist/dist_js/app/ng-tags-input.js
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/css/ng-tags-input.bootstrap.css
E/AndroidProtocolHandler( 3622): Unable to open asset URL: file:///android_asset
/www/css/ng-tags-input.css

我的apk没有这些文件，因为我已经安装了npm install gulp-useref --save-dev，如教程中所述。这会将所有css和js构建到一个文件中。同样在assets / ww中的apk里面我只有两个文件夹dist_js和dist_css

Answer 1

我遵循了那个教程，但在某些时候我放弃了，因为它混合了太多不同的不同任务：gulp和node。

我个人认为，钩子应负责为最终版本准备文件夹。

我想出了这个解决方案，它运行得很好但需要一些配置。尽管如此，即使是该文章中提出的解决方案，也需要为不同的gulp任务提供某种定义文件夹。

首先，您需要安装一些软件包：

npm install jshint --save-dev
npm install async --save-dev
npm install htmlparser2 --save-dev
npm install concat-with-sourcemaps --save-dev
npm install uglify-js --save-dev
npm install clean-css --save-dev
npm install ng-annotate --save-dev
npm install node-useref --save-dev

然后你需要在hooks文件夹中复制这些钩子。您应该已经拥有此after_prepare\010_add_platform_class.js个javascript文件。

必须将

before_prepare\02_jshint.js复制到钩子内的before_prepare文件夹中。如果您没有该文件夹，只需创建它。

必须将{p> after_prepare\011_move_fonts_to_root.js复制到after_prepare文件夹中。

必须将{p> after_prepare\012_concat_files_in_index.js复制到after_prepare文件夹中。

必须将{p> after_prepare\013_unused_folders_delete.js复制到after_prepare文件夹中。

必须将{p> after_prepare\014_uglify.js复制到after_prepare文件夹中。

必须将{p> after_prepare\015_prepare_index_html.js复制到after_prepare文件夹中。

我将尝试解释所有这些脚本应该做什么。

02_jshint.js将验证应用程序中的javascripts。

您可以编辑该文件并将其他javascripts文件夹更改或添加到此阵列：

var foldersToProcess = [
    'js'
];

我这样做是因为我没有将所有主要应用程序的js文件放在同一个地方。

011_move_fonts_to_root.js移动应用根目录中名为fonts的文件夹中的所有字体。我必须执行此任务，因为在某些时候我将删除所有lib文件夹，这对于您的应用程序在发布期间有很大的影响力。

在该文件中还有一个文件夹数组：

var foldersWithFontsToMove = [
  'lib/ionic/fonts'
];

您可以在其中添加要移动到根fonts的其他字体文件夹。

012_concat_files_in_index.js解析html文件index.html并查找对js和css文件的所有引用，并在仅2个文档中连接所有这些文件：app.js和app.css。

这两个包将包含您的应用程序中包含离子束的所有js文件。

注意：cordova.js不会被触及，因为它更好。

在这里，您可以调整使用这4个变量的内容：

var appConcatFolder = 'app';
var appConcatFile = 'app.js';
var cssConcatFolder = 'css';
var cssConcatFile = 'app.css';

appConcatFolder是包含js文件包的文件夹。 appConcatFile是js包的名称。 cssConcatFolder是包含js文件包的文件夹 cssConcatFile是css包的名称。

013_unused_folders_delete.js将删除所有未使用的文件夹。由于我们正在移动那些东西，所以不需要在我们的最终应用程序中复制这些文件夹。

您可以配置添加或删除此阵列的路径：

var foldersToRemove = [
  'lib',
  'js'
];

由于我们已经移动了文件夹app中的所有js文件（在根目录中），我们不再需要js文件夹了。我们摆脱了lib文件夹中放置了所有离子的东西。

014_uglify.js uglifies并缩小js文件和css包。

您可以更改此文件更新此数组：

var foldersToProcess = [ 
    'app',
    'css'
];

此数组包含css包所在的文件夹;另一个文件夹是js包文件夹。

015_prepare_index_html.js将使用node-useref来解析我们的index.html文件，并将脚本和css替换为我们的捆绑包。

要配置此任务，您必须更改index.html文件，添加以下部分：

<!-- build:css css/app.css -->

<!-- endbuild -->

所以你的index.html看起来像这样：

<!-- build:css css/app.css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- endbuild -->

<!-- build:js app/app.js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<!-- endbuild -->

如果您想了解有关node-useref的更多信息，可以查看here。

现在，所有这些脚本都可以运行：

ionic build --release [platform]

或我的自定义ionic run --runrelease。

当我在控制台中写下很多信息时，你会看到很多事情发生。

在流程结束时，您应该在apk中找到此文件夹结构：

您可以在其中找到压缩文件，缩小文件和uglified文件以及带有新参考文件的index.html文件。

Answer 2

您好@LeftyX建议更改钩子js文件，引导我到我的解决方案。显然我不得不移动一些文件，这些文件不是本教程中提到的默认步骤的一部分。但那只是因为我的结构不同。即我已将index.html内容移至main.html，而index.html拥有此类

的脚本标记

<script>
  window.location = './main.html';
</script>

为了解决这个问题，我将以下内容添加到040_move_dist_files_to_platforms.js文件中：

var androidPlatformsDir_www_css = path.resolve(__dirname, '../../platforms/android/assets/www/dist_css');
var androidPlatformsDir_www_main = path.resolve(__dirname, '../../platforms/android/assets/www/main.html');
mv(androidPlatformsDir_dist_main, androidPlatformsDir_www_main, function(err) {
  if(typeof err != 'undefined')
  {
    console.log("err");
    console.log(err);
    console.log("ERROR when moving main.html file to Android platform");
  }
  else
  {
    console.log("main.html file moved OK to Android platform");
  }
});

我还重命名了文字＆＃39; index.html＆＃39;到＆＃39; main.html＆＃39;在010_add_platform_class.js

我发现块中的一个js文件中出现错误的另一个问题是

<!-- build:js dist_js/app.js -->

评论有帮助。

在minify之后APK停止工作，uglify - 代码运行：'ionic serve --lab'和'离子运行android -l --debug'但不在'离子构建android'上

2 个答案: