2

我正在尝试将 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 文件中的资产管理器对象更改为：

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

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

4

1 回答 1

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，绝对不是靠自己做的。

于 2014-12-27T10:38:45.823 回答