javascript - Mean.io 中的 Assetmanager 在生产模式下不工作

Question

我正在尝试将 Mean.io 用于我正在制作的应用程序，并且我基本上没有更改原始配置文件中的任何内容，并且当我在生产模式下将此应用程序启动到 heroku 时，它不会聚合dist 文件正确并给我

“无法加载资源:服务器响应状态为 404(未找到)http://****.herokuapp.com/bower_components/build/css/dist.min.css”

同样适用于 JS 文件。相关文件如下所示: 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"
        ]
    }
}
}

在我的 gruntfile 中:

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

我可以看出这是一个生产与开发错误，就好像我将 express.js 文件中的 assetmanager 对象更改为:

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

与 !== 'production' 相反，它在本地给了我同样的问题。我对这种加载文件的方式不是很熟悉，而且我似乎找不到任何解决方案，因此非常感谢任何可以提供答案或指出正确方向的人。

Answer 1

我们正处于发布产品的最后阶段，我们必须实际进行一些聚合。

事实证明这并不容易。

最简单的方法是 NODE_ENV=production forever start server.js

但这对我们不起作用，并在控制台上吐出错误。

我们的 assets.json 看起来像这样

"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",

gruntfile 用于生产的一组步骤是 clean、uglify，然后是 cssmin。

我更喜欢这样的脚本模式

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

无论如何，这两种方法都不适合我们。我认为当以正确的顺序加载内容时，丑化完成了，我们最终遇到了一堆控制台错误。

我们要做的是重写 assets.json 以将其分解为 jquery 依赖项和 angular 依赖项，然后加载 jquery 依赖项，然后加载 angular 依赖项。也许我们正在使用一些冲突的库，这导致了问题。

即使以上方法对您有效，聚合仍然存在其他问题。例如 => tinymce 会告诉您它现在正在查看 bower_components/dist/js 中的插件文件夹、主题文件夹和皮肤文件夹。

所以我们不得不将其更改为

#!/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

显然这不是一个漂亮的脚本，但这对我们有用。 NODE_ENV=production，绝对不是自己做的。