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。

这导致了一个非常大的构建，因为许多文件包含在凉亭中组件对生产没用。

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

我正在考虑为此创建一个钩子但是在用我不认识的语言（nodeJS）编写代码行之前，我希望你的回归和建议。

Answer 1

根据Cordova工作流程，您可以添加删除不必要文件的钩子脚本。可以在此处找到清理脚本的详细示例：https://blog.nraboy.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＆＃39;文件夹或＆＃39; bower_components＆＃39;因为我今天只通过他们安装。

希望这有帮助，祝你好运

Answer 2

我认为最好的做法是：

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

这将使您的/ www文件夹保持整洁，仅包含您在cordova版本中所需的文件。

Answer 3

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

使用 Gulp 和 Ionic Framework ：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.
    ]
}

此致，Nicholls

Answer 4

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

将bower_components文件夹移至www文件夹外的项目根目录。
将index.html重命名为_index.html。我们稍后会确保Gulp自动生成index.html。
安装gulp和gulp-useref。
修改您的_index.html，使其看起来像这样：



<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>


将gulp watch任务配置为在index.html文件夹中使用连接文件构建新的www文件。

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>

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

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

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

4 个答案: