2015-05-15 112 views
12
文件

我的項目結構如下:離子/涼亭/科爾多瓦 - 忽略構建

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)編寫代碼行之前,我希望能夠回覆並提供建議。

回答

16

根據科爾多瓦工作流程,您可以添加一個鉤子腳本,刪除不必要的文件。 清理腳本的具體例子可以在這裏找到: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'中,因爲我今天只通過它們安裝。

希望這有助於 好運

+1

完美正是我需要 – aorfevre

+1

該解決方案是複雜的,有需要你明確的列出所有你想要在你的垃圾清理腳本刪除的文件和文件夾的缺點。 [我的解決方案](http://stackoverflow.com/questions/30269679/ionic-bower-cordova-ignore-files-for-build/33698109#33698109)採取了一種反向的方法,並且只列出了您需要的文件你的科爾多瓦建立,並將它們複製到/ www文件夾/ – jjjjs

+0

你是一位神。謝謝 – CBaker

5

我認爲最好的辦法是做這樣的:

  1. 移動的bower_components文件夾和index.html文件到項目根,外/ WWW文件夾
  2. 安裝gulpgulp-usemin
  3. 包裹全部來自涼亭組件.js文件和.css文件中usemin <build:js><build:css>部分
  4. 在你的gulpfile中配置一個任務,將所有這些文件連接成一個lib.js和lib.css文件。確保將這兩個文件以及重寫的index.html輸出到/ www文件夾
  5. 在下次構建之前以及每次添加新的bower組件之前,執行gulp任務。

這將保持您的/ www文件夾整潔,只包含您在cordova構建中需要的文件。

+4

你能舉一個例子嗎?建立這個gulp文件很容易,但我不確定如何保持與'ionic serve'兼容。 –

+0

@Ulysses V看到我的答案在下面:) –

2

隨着鮑爾你需要使用咕嘟咕嘟使用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. 
    ] 
} 

問候,李啓

+1

我建議更新你的答案,以包含一個例子與一個CSS文件,以防止非JS文件支持,例如離子庫本身:「離子」:[ 「css/ionic.min.css」, 「js/ionic.bundle.min.js」, 「fonts/*」 ] – skotturi

0

這是對this答案的改善。我已經將它應用於我自己的項目。

  1. bower_components文件夾移動到www文件夾之外的項目根目錄。
  2. index.html重命名爲_index.html。我們稍後將確保Gulp自動生成index.html
  3. 安裝gulpgulp-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 watchionic serve之前運行。
  • { 
        "watchPatterns": [ 
        "www/_index.html", 
        ], 
        "gulpStartupTasks": [ 
        "watch" 
        ] 
    }