离子/凉亭/科尔多瓦 - 忽略构建

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

根据科尔多瓦工作流程，您可以添加一个钩子脚本，删除不必要的文件。 清理脚本的具体例子可以在这里找到：https://blog.nraboy.com/2015/01/hooks-apache-cordova-mobile-applications/

但是，得到一个快速的一步一步的总结：

添加到after_prepare钩夹（/钩/ 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中膨胀以及我总是尽量保持该文件夹瘦肉和只添加后部署所需的库，另一个开发人员。依赖关系，比如茉莉花我要么保存在'node_modules'文件夹或'bower_components'中，因为我今天只通过它们安装。

希望这有助于 好运

Answer 2

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

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

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

Answer 3

随着鲍尔你需要使用咕嘟咕嘟使用npm preen删除不必要的文件

见我的例子与离子框架：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> 

编辑您的ionic.project文件，以便它看起来如下所示。这将确保gulp watch在ionic serve之前运行。

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