Assetmanager in Mean.io funktioniert nicht im Produktionsmodus.

Question

Ich versuche, Mean.io für eine App zu nutzen, die ich erstelle, und ich habe im Wesentlichen nichts an den Originalkonfigurationsdateien geändert. Wenn ich diese App im Produktionsmodus auf Heroku starte, werden die dist-Dateien nicht korrekt zusammengeführt und es wird mir folgender Fehler angezeigt:

"Fehler beim Laden der Ressource: Der Server hat mit einem Status von 404 (Nicht gefunden) geantwortet http://\*\*\*\*.herokuapp.com/bower\_components/build/css/dist.min.css""

Das gleiche gilt für die JS-Datei. Die entsprechenden Dateien sehen so aus: Assets.json: {

"core": {
    "css": {
        "bower_components/build/css/dist.min.css": [
          "bower_components/met_theme/global/css/components.css"
        ]
    },
    "js": {
        "bower_components/build/js/dist.min.js": [

            "bower_components/angular/angular.js",
            "bower_components/angular-mocks/angular-mocks.js",
            "bower_components/angular-cookies/angular-cookies.js",
            "bower_components/angular-resource/angular-resource.js",
            "bower_components/angular-ui-router/release/angular-ui-router.js",
            "bower_components/angular-bootstrap/ui-bootstrap.js",
            "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
            "bower_components/met_theme/global/scripts/datatable.js",
            "bower_components/met_theme/global/scripts/metronic.js"
        ]
    }
}
}

In meinem Gruntfile:

    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    assets: grunt.file.readJSON('config/assets.json'),
    // später
            uglify: {
        core: {
            options: {
                mangle: false
            },
            files: '<%= assets.core.js %>'
        }
    },
    csslint: {
        options: {
            csslintrc: '.csslintrc'
        },
        src: paths.css
    },
    cssmin: {
        core: {
            files: '<%= assets.core.css %>'
        }
    },

Ich sehe, dass dies ein Produktions- vs. Entwicklungsfehler ist, denn wenn ich das assetmanager-Objekt in meiner express.js-Datei auf folgendes ändere:

var assets = assetmanager.process({
    assets: require('./assets.json'),
    debug: process.env.NODE_ENV !== 'development',
    webroot: /public\/|packages\//g
});

Anstelle von !== 'production' erhalte ich lokal dasselbe Problem. Ich bin nicht sehr vertraut mit dieser Art des Laden von Dateien und kann anscheinend keine Lösungen finden. Jeder, der eine Antwort geben oder mich in die richtige Richtung weisen kann, wäre sehr dankbar.

Answer 1

Wir befinden uns in den letzten Phasen der Markteinführung eines Produkts, und es war für uns unerlässlich, tatsächlich einige Aggregationen durchzuführen.

Es stellte sich heraus, dass es überhaupt nicht einfach war.

Der einfachste Weg, dies zu tun, lautet NODE_ENV=production forever start server.js

Aber das hat einfach nicht für uns funktioniert und spuckte Fehler auf der Konsole aus.

Unser assets.json sieht so aus

"bower_components/jquery/dist/jquery.min.js",
"bower_components/socket.io-client/socket.io.js",
"bower_components/fullcalendar/fullcalendar.min.js",
"bower_components/tinymce/tinymce.min.js",
"bower_components/select2/select2.min.js",
"bower_components/angular/angular.js",        
"bower_components/angular-ui-calendar/src/calendar.js",
"bower_components/checklist-model/checklist-model.js",
"bower_components/angular-ui-tinymce/src/tinymce.js",
"bower_components/angular-elastic/elastic.js",
"bower_components/angular-ui-select2/src/select2.js",
"bower_components/angular-ui-utils/ui-utils.min.js",
"bower_components/angular-ui-router/release/angular-ui-router.min.js",
"bower_components/angular-bootstrap/ui-bootstrap.min.js",
"bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js",
"bower_components/ng-file-upload/angular-file-upload.min.js",

Die Schritte, die die Gruntfile für die Produktion vorsieht, sind Bereinigen, Verkleinern und dann CSS minimieren.

Ich bevorzuge den Skriptmodus wie folgt

#!/bin/sh
grunt clean
grunt concat
grunt uglify
grunt cssmin
NODE_ENV=envname forever --uid "appname" -a start server.js

Wie auch immer, keiner der Ansätze hat wirklich für uns funktioniert. Ich denke, die Verkleinerung hat total versagt, als es darum ging, Dinge in der richtigen Reihenfolge zu laden, und wir landeten mit einer Menge von Konsolenfehlern.

Was wir tun mussten, war, unser assets.json umzuschreiben, um es in jquery-Abhängigkeiten und angular-Abhängigkeiten aufzuteilen, und dann jquery-Abhängigkeiten gefolgt von angular-Abhängigkeiten zu laden. Vielleicht gab es einige sich widersprechende Bibliotheken, die wir benutzen, die das Problem verursachten.

Auch wenn das oben Genannte für Sie funktioniert hat, gibt es immer noch weitere Probleme mit der Aggregation. Zum Beispiel => tinymce wird Ihnen sagen, dass es jetzt den Ordner bower_components/dist/js für einen Plugin-Ordner, einen Themen-Ordner und einen Skin-Ordner untersucht.

Also mussten wir das ändern zu

#!/bin/sh
grunt clean
grunt concat
grunt uglify
grunt cssmin
cp -r bower_components/tinymce/plugins bower_components/build/js/
cp -r bower_components/tinymce/skins bower_components/build/js/
cp -r bower_components/tinymce/themes bower_components/build/js/
NODE_ENV=envname forever --uid "appname" -a start server.js

Offensichtlich kein schönes Skript, aber das ist das, was für uns funktioniert hat. NODE_ENV=production hat alleine definitiv nicht den Trick gemacht.