离子/鲍尔/cordova – 忽略构build的文件

我的项目结构如下：

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

目前， www/lib目录占用了21.8 Mb 。 （我有一大堆凉亭组件添加到我的项目中。）

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

这导致了一个非常大的构build，因为包含在凉亭组件中的大量文件没有用于生产。

手动pipe理所有的bower依赖关系显然不是一种select。 那么你们如何设法清理你的项目平台目录来构build？

我正在考虑为此创build一个钩子，但是在用我不知道的语言（nodeJS）编写代码之前，我希望能够回复并提供build议。

Answer 1

根据cordova工作stream程，您可以添加一个钩子脚本，删除不必要的文件。 清理脚本的详细示例可以在这里find： https ： //blog.nraboy.com/2015/01/hooks-apache-cordova-mobile-applications/

但要快速一步一步总结：

添加到after_prepare钩子文件夹（/ hooks / after_prepare）脚本（01_junk_cleanup.js – 01先运行，其余任何你想要的），并在文件中指定您要删除的文件和文件夹。 例如，这里是如何删除一个testing文件夹和相关文件，只是改变你的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文件从bower组件包装到usemin <build:js>和<build:css>节中
4. 在您的gulp文件中configuration一个任务，将所有这些文件连接成一个lib.js和一个lib.css文件。 确保这两个文件以及重写的index.html都输出到/ www文件夹
5. 在下次构build之前执行gulp任务，并且每次添加一个新的bower组件。

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

Answer 3

与鲍尔你需要使用npm preen删除不必要的文件

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

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

 "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

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

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. configuration您的gulp watch任务，在连接文件的www文件夹中构build新的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文件，使其如下所示。 这将确保在ionic serve之前运行gulp watch 。

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