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 Heroku-Produktionsmodus starte, werden die Dist-Dateien nicht korrekt aggregiert und es zeigt mir

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

Gleiches 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 Fehler bei der Produktion gegenüber der Entwicklung ist, da mir, 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
});

Im Gegensatz zu !== 'production' zeigt es mir das gleiche Problem lokal. Ich bin nicht sehr vertraut mit dieser Art des Ladens von Dateien und ich kann keine Lösungen finden. Jeder, der eine Antwort geben kann 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 von entscheidender Bedeutung, tatsächlich einige Aggregationen durchzuführen.

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

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

Aber das hat bei uns einfach nicht funktioniert und hat Fehler in der Konsole ausgegeben.

Unser assets.json sieht ungefähr 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 der Gruntfile für die Produktion hat, sind clean, uglify und dann cssmin.

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

Auf jeden Fall hat keiner dieser Ansätze wirklich bei uns funktioniert. Ich denke, dass die Uglifizierung völlig daneben ging, als es darum ging, Dinge in der richtigen Reihenfolge zu laden, und wir landeten mit einer Reihe von Konsolenfehlern.

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

Auch wenn das oben Genannte bei Ihnen funktioniert hat, gibt es immer noch weitere Probleme mit der Aggregation. Zum Beispiel => tinymce wird Ihnen mitteilen, dass es jetzt den Plugin-Ordner, den Design-Ordner und den Skin-Ordner unter bower_components/dist/js sucht.

Dann 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 es, was bei uns funktioniert hat. NODE_ENV=production hat definitiv nicht alleine den Trick gemacht.