Ionic / bower / cordova – ignore les fichiers pour la construction

Selon le stream de travail Cordova, vous pouvez append un script de raccordement qui supprime les fichiers inutiles. Un exemple détaillé d’un script de nettoyage peut être trouvé ici: https://blog.nraboy.com/2015/01/hooks-apache-cordova-mobile-applications/

Mais pour résumer rapidement, étape par étape:

Ajoutez au dossier hook after_prepare (/ hooks / after_prepare) un script (01_junk_cleanup.js – 01 à exécuter en premier, le rest comme vous le souhaitez) et dans le fichier, spécifiez les fichiers et les dossiers à supprimer. Par exemple, voici comment vous pouvez supprimer un dossier de test et modifier les fichiers pertinents en fichiers de votre répertoire lib et de ces fichiers. Notez que cet exemple est un peu différent de celui du lien que j’ai donné plus tôt, vous voudrez peut-être aussi y jeter un coup d’œil.

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; } } }); }); }); } 

En plus de ce qui précède, un peu plus évident, mais je me permets de le mentionner quand même. Après avoir eu le bloat www / lib également, j’essaie toujours de garder le dossier allégé et d’append uniquement les bibliothèques nécessaires au déploiement, l’autre dev. des dépendances telles que jasminee sont contenues dans le dossier ‘node_modules’ ou ‘bower_components’, car je ne les installe qu’aujourd’hui.

En espérant que ça aide, bonne chance

Je pense que la meilleure approche serait de faire ceci:

1. Déplacez le dossier bower_components et votre fichier index.html vers la racine du projet, en dehors du dossier / www.
2. Installer gulp et gulp-usemin
3. Enveloppez tous les fichiers .js et .css des composants bower dans les sections usemin et
4. Configurez une tâche dans votre fichier gulp pour concaténer tous ces fichiers dans un fichier lib.js et un fichier lib.css. Assurez-vous que ces deux fichiers ainsi que le fichier index.html réécrit sont sortis dans le dossier / www
5. Exécutez la tâche gulp avant votre prochaine construction et ajoutez chaque fois un nouveau composant bower.

Cela gardera votre dossier / www rangé et ne contenant que les fichiers dont vous avez besoin dans votre version de Cordova.

Avec Bower, vous devez utiliser npm preen pour supprimer les fichiers inutiles.

Voir mon exemple d’utilisation de Gulp avec Ionic Framework : https://github.com/jdnichollsc/Ionic-Starter-Template

En gros, vous pouvez configurer votre fichier bower.json pour indiquer le chemin des fichiers dont vous avez besoin, par exemple:

 "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. ] } 

Cordialement, Nicholls

C’est une amélioration par rapport à cette réponse. Je l’ai appliqué à mon propre projet.

1. Déplacez le dossier bower_components vers la racine du projet, en dehors du dossier www .
2. Renommez index.html en _index.html . Nous veillerons ultérieurement à ce que Gulp génère automatiquement index.html .
3. Installez gulp et gulp-useref .

4. Modifiez votre _index.html afin qu’il ressemble à ceci:

5. Configurez votre tâche gulp watch pour générer un nouveau fichier index.html dans le dossier www avec les fichiers concaténés.

 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']); 

Lorsque cette tâche sera exécutée, votre fichier index.html contiendra simplement ceci:

6. Modifiez votre fichier ionic.project afin qu’il ressemble à ce qui suit. Cela garantira que la gulp watch est exécutée avant le ionic serve .

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