Ionic / bower / cordova - 忽略构建文件

Question

我的项目结构如下：

MyApp
  - hooks
  - platforms
     - android
     - ios
  - www
    - js / css / templates..
    - lib (including all bower components)

目前，www/lib 目录占用 21,8 Mb。 （我的项目中添加了大量的凉亭组件。）

在构建每个项目时，将整个www 文件夹复制到platform/android（例如）文件夹进行构建，当然包括www/lib。

这导致构建非常大，因为凉亭中包含大量文件 组件对生产毫无用处。

手动管理所有 bower 依赖项显然不是一种选择。那么你们是如何清理项目平台目录以进行构建的呢？

我正在考虑为此创建一个钩子，但在用我不知道的语言 (nodeJS) 编写代码行之前，我希望得到您的回报和建议。

Answer 1

根据 Cordova 工作流程，您可以添加一个挂钩脚本来删除不必要的文件。 可以在此处找到清理脚本的详细示例：https://www.thepolyglotdeveloper.com/2015/01/hooks-apache-cordova-mobile-applications/

但是要给出一个快速的一步一步的总结：

在 after_prepare 挂钩文件夹 (/hooks/after_prepare) 中添加一个脚本（首先运行 01_junk_cleanup.js - 01，其余任何您想要的）并在文件中指定要删除的文件和文件夹。例如，这里是您如何删除测试文件夹和相关文件只需更改到您的 lib 目录和那里的文件的方法。请注意，此示例与我之前提供的链接中的示例有点不同，因此您可能也想看看那里。

01_junk_cleanup.js：

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');

var foldersToProcess = [
    "js",
    "css"

];

var foldersToDelete = [
    "test"
];

var filesToDelete = [
    "karmaOnBrowser.conf.js",
    "karmaOnEmulators.conf.js",
    "SpecRunner.html"
];

var iosPlatformsDir = "platforms/ios/www/";
var androidPlatformsDir = "platforms/android/assets/www/";

filesToDelete.forEach(function(file) {
    var filePathIOS = iosPlatformsDir + file;
    var filePathAndroid = androidPlatformsDir + file;
    if(fs.existsSync(filePathIOS)){
        fs.unlinkSync(filePathIOS);
    };
    if(fs.existsSync(filePathAndroid)){
        fs.unlinkSync(filePathAndroid);
    };
});

foldersToProcess.forEach(function(folder) {
    processFiles(iosPlatformsDir + folder);
    processFiles(androidPlatformsDir + folder);
});

foldersToDelete.forEach(function(folder) {
    deleteFolderRecursive(iosPlatformsDir + folder);
    deleteFolderRecursive(androidPlatformsDir + folder);
});

function deleteFolderRecursive(path){
    if( fs.existsSync(path) ) {
         fs.readdirSync(path).forEach(function(file,index){
             var curPath = path + "/" + file;
             if(fs.lstatSync(curPath).isDirectory()) { // recurse
                deleteFolderRecursive(curPath);
             } else { // delete file
                fs.unlinkSync(curPath);
             }
         });
         fs.rmdirSync(path);
    }
}

function processFiles(dir) {
    fs.readdir(dir, function(err, list) {
        if(err) {
            console.log('processFiles err: ' + err);
            return;
        }
        list.forEach(function(file) {
            file = dir + '/' + file;
            fs.stat(file, function(err, stat) {
                if(!stat.isDirectory()) {
                    switch(path.basename(file)) {
                        case ".DS_Store":
                            fs.unlink(file, function(error) {
                                console.log("Removed file " + file);
                            });
                            break;
                        case "Thumbs.db":
                            fs.unlink(file, function(error) {
                                console.log("Removed file " + file);
                            });
                            break;
                        default:
                            console.log("Skipping file " + file);
                            break;
                    }
                }
            });
        });
    });
}

除上述之外，更明显一点，但无论如何我觉得值得一提，在拥有 www/lib 膨胀之后，我总是尝试保持文件夹精简并仅添加部署所需的库，其他开发人员。 jasmine 等依赖项我要么保存在“node_modules”文件夹中，要么保存在“bower_components”中，因为我今天只通过它们安装。

希望这会有所帮助， 祝你好运

Answer 2

我认为最好的方法是这样做：

1. 将 bower_components 文件夹和 index.html 文件移动到 /www 文件夹之外的项目根目录
2. 安装gulp 和gulp-usemin
3. 将 Bower 组件中的所有 .js 文件和 .css 文件包装在 usemin <build:js> 和 <build:css> 部分中
4. 在 gulpfile 中配置一个任务，将所有这些文件连接到一个 lib.js 和一个 lib.css 文件中。确保将这两个文件以及重写的 index.html 输出到 /www 文件夹
5. 在下一次构建之前执行 gulp 任务，每次添加新的 bower 组件时。

这将使您的 /www 文件夹保持整洁，并且只包含您在 cordova 构建中需要的文件。

Answer 3

使用 Bower 您需要使用 npm preen 删除不必要的文件

查看我在 Ionic Framework 中使用 Gulp 的示例：https://github.com/jdnichollsc/Ionic-Starter-Template

基本上你可以设置你的bower.json文件来指明你需要哪些文件的路径，例如：

"preen": {
    //... More libraries
    "ionic-datepicker": [
        "dist/*.js" //You only need these files
        //Other files and folders will be deleted to reduce the size of your app
    ],
    "ion-floating-menu": [
        "dist/*" //Keep all the files (.html, .css, .js, etc) of the directory.
    ]
}

问候，尼科尔斯

Answer 4

这是对this 答案的改进。我已经将它应用到我自己的项目中。

1. 将bower_components 文件夹移动到项目根目录，在www 文件夹之外。

2. 将index.html 重命名为_index.html。我们稍后会确保 Gulp 自动生成index.html。

3. 安装gulp 和gulp-useref。

4. 编辑您的_index.html，使其看起来像这样：

   <!-- build:js dist/js/vendor.js -->

   <script src="../bower_components/ionic/release/js/ionic.bundle.min.js"></script>

   <script src="../bower_components/ngstorage/ngStorage.min.js"></script>

   <script src="../bower_components/ngCordova/dist/ng-cordova.min.js"></script>

   <!-- endbuild -->

5. 配置您的gulp watch 任务以在www 文件夹中构建新的index.html 文件和连接的文件。

var entrypoint = './www/_index.html';

gulp.task('watch', function() {
  gulp.watch(entrypoint, ['concat-js-and-css']);
});

gulp.task('concat-js-and-css', function () {
    return gulp.src(entrypoint)
        .pipe(useref()) 
        .pipe(rename(function (path) {
          // rename _index.html to index.html
          if (path.basename == '_index' && path.extname == '.html') {
            path.basename = "index";
          }
        }))
        .pipe(gulp.dest('./www'))
});

gulp.task('build', ['concat-js-and-css']);

当该任务运行时，您的 index.html 文件将仅包含以下内容：

<script src="dist/js/vendor.js"></script>

6. 编辑您的ionic.project 文件，使其如下所示。这将确保 gulp watch 在 ionic serve 之前运行。

{
  "watchPatterns": [
    "www/_index.html",
  ],
  "gulpStartupTasks": [
    "watch"
  ]
}