web-dev-qa-db-fra.com

Biens manquants dans Angular application construite avec grunt

J'ai construit une application utilisant Yeoman et AngularJS (et tout ce qui va avec, comme Grunt et Bower).

Tout fonctionne parfaitement lors de l'exécution locale en utilisant grunt serve. Cependant, après avoir exécuté grunt et déployé l'application, il manque quelques ressources et je ne sais pas quel est le meilleur moyen de le résoudre.

Premièrement, exécuter Grunt semble copier les images dans dist, mais il les renomme sans ajuster les références dans le CSS. app/images/uparrow.png devient dist/images/3f84644a.uparrow.png.

Voici une ligne du fichier main.scss:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

Lorsqu'il est compilé en CSS pendant le processus de construction, il ne réécrit pas le chemin, le navigateur essaie de charger dist/images/uparrow.png qui est manquant.

Deuxièmement, il y a un problème avec le chargement des polices pour le plugin Bootstrap. Le code CSS d’amorçage à app/bower_components/bootstrap/dist/css/bootstrap.css fait référence à ../fonts/glyphicons-halflings-regular.woff. Le chemin relatif est résolu en app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof et cela fonctionne parfaitement.

Une fois construit, le fournisseur CSS est ensuite combiné et décomposé en un seul fichier CSS à dist/styles/8727a602.vendor.css. Le chemin relatif à la police n'est cependant pas réécrit. Il essaie donc de rechercher des polices dans le dossier dist/fonts, plutôt que dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof où se trouve le fichier.

Tout conseil très apprécié.

angularjsgruntjsyeomanbower
16
theandywaite

Vous faites face à des bugs Yeoman avec la tâche build qui ne sont pas encore résolus. Je crois qu'il n'y a pas de solution propre, voici donc quelques solutions de contournement.

Tout d'abord, image rev:

Supprimez simplement les images de la tâche rev et vous serez prêt à partir.

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', <- remove that line
        '<%= yeoman.dist %>/styles/fonts/*'
      ]
    }
  }
},

Deuxièmement, les polices bootstrap-sass ne sont pas copiées dans le dossier dist. J'ai passé des heures sur ce bogue et je ne trouvais pas de solution adéquate. Finalement, j'ai décidé d'ajouter une nouvelle règle à la tâche copy:

copy: {
  dist: {
    files: [{
      // your existing rules...
    },
    // add this rule to copy the fonts:
    {
      expand: true,
      flatten: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>/fonts',
      src: ['bower_components/sass-bootstrap/fonts/*.*']
    }]
  },
  ...
}

Exécutez grunt build à nouveau après ces modifications et cela devrait fonctionner.

27
Guilhem Soulas

J'ai trouvé une solution intéressante au problème CSS - SCSS a des fonctions intégrées pour les images et cela réécrit automatiquement les chemins d'accès aux ressources:

.table.sortable th.sorted-asc        { background-image: image-url('uparrow.png'); }
3
theandywaite

l'option cssmin avec root remplace tous les chemins relatifs.

vous pouvez désactiver l'option racine de cssmin dans votre Gruntfile.js

cssmin: {
  options: {
    //root: '<%= yeoman.app %>'
  }
},
2
Eduardo Dennis

J'ai eu exactement le même problème et je l'ai résolu par:

1) Ajoutez à la tâche de copie (à l’intérieur du fichier grunt) les polices bootstrat: {Expand: true, cwd: 'src/main/webapp/bower_components/bootstrap/dist', src: 'fonts/*', dest: '<% = yeoman.dist%>/assets /'Buch Cela copiera les polices bootstrap dans votre dossier dist/assests/fonts.

2) Supprimez la tâche cssmin ou commentez le paramètre racine. Cela devrait résoudre votre problème en ce qui concerne les chemins. 

Pour plus d'informations, consultez ce message qui contient une explication détaillée: [ http://ignaciosuay.com/how-to-avoid-grunt-build-not-loading-bootstrap-glyphicons-using-jhipster/

1
ignacio.suay