webentwicklung-frage-antwort-db.com.de

Assets fehlen in Angular Anwendung mit Grunt erstellt

Ich habe eine Anwendung mit Yeoman und AngularJS (und all dem, was dazu gehört, wie Grunt und Bower) erstellt.

Alles funktioniert perfekt, wenn Sie lokal mit grunt serve arbeiten. Nach dem Ausführen von Grunt und dem Bereitstellen der Anwendung fehlen jedoch einige Ressourcen, und ich bin nicht sicher, was der beste Weg ist, sie zu lösen.

Erstens: Wenn Sie Grunt ausführen, scheint er die Bilder in dist zu kopieren, benennt sie jedoch um, ohne die Verweise im CSS anzupassen. app/images/uparrow.png wird zu dist/images/3f84644a.uparrow.png.

Hier ist eine Zeile aus der main.scss:

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

Wenn er während des Erstellungsprozesses in CSS kompiliert wird, schreibt er den Pfad nicht neu, sodass der Browser versucht, dist/images/uparrow.png zu laden, der fehlt.

Zweitens gibt es ein Problem beim Laden der Schriftarten für das Bootstrap-Plugin. Das Bootstrap-CSS unter app/bower_components/bootstrap/dist/css/bootstrap.css verweist auf ../fonts/glyphicons-halflings-regular.woff. Der relative Pfad wird in app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof aufgelöst und das funktioniert einwandfrei.

Nach dem Erstellen wird der Hersteller-CSS jedoch unter dist/styles/8727a602.vendor.css in einer einzigen CSS-Datei zusammengefasst und minimiert. Der relative Pfad zur Schrift wird jedoch nicht neu geschrieben. Es wird also versucht, im dist/fonts-Ordner nach Schriftarten zu suchen, anstatt nach dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof, wo sich die Datei tatsächlich befindet.

Jeder Rat wurde sehr geschätzt.

16
theandywaite

Sie haben Yeoman-Fehler mit der Aufgabe build, die noch nicht behoben sind. Ich glaube, es gibt keine sauberen Lösungen, daher gibt es einige Problemumgehungen.

Zuerst Bildrevision:

Entfernen Sie einfach Bilder aus der rev-Aufgabe, und Sie können loslegen.

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/*'
      ]
    }
  }
},

Zweitens werden Bootstrap-sass-Schriftarten nicht in den Ordner dist kopiert. Ich habe Stunden mit diesem Fehler verbracht und konnte keine richtige Lösung finden. Schließlich entschied ich mich, der Aufgabe copy eine neue Regel hinzuzufügen:

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/*.*']
    }]
  },
  ...
}

Führen Sie nach diesen Änderungen erneut grunt build aus und es sollte funktionieren.

27
Guilhem Soulas

Ich habe eine ordentliche Lösung für das CSS-Problem gefunden - SCSS verfügt über integrierte Funktionen für Bilder, wodurch Pfade automatisch in Assets geschrieben werden:

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

cssmin mit root-Option ersetzt alle relativen Pfade.

sie können die Root-Option von cssmin in Ihrer Gruntfile.js deaktivieren

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

Ich hatte genau das gleiche Problem und löste es durch:

1) Fügen Sie der Kopieraufgabe (in der Gruntdatei) die Bootstrat-Schriftarten hinzu: {Erweitern: true, cwd: 'src/main/webapp/bower_components/bootstrap/dist', src: 'fonts/*', dest: '<% = yeoman.dist%>/assets /' verjagen ... ____.] Dadurch werden die Bootstrap-Schriftarten in den Ordner dist/assests/fonts kopiert.

2) Entfernen Sie die cssmin-Task oder kommentieren Sie den root-Parameter aus. Das sollte Ihr Problem bezüglich der Pfade lösen. 

Weitere Informationen finden Sie in diesem Beitrag, der eine ausführliche Erklärung enthält: [ http://ignaciosuay.com/how-to-avoid-grunt-build-not-loading-bootstrap-glyphicons-using-jhipster/

1
ignacio.suay