Mean.io中的Assetmanager无法在生产模式下工作

时间:2014-07-23 04:44:50

标签: javascript angularjs asset-management

我正在尝试将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
});

相反!==&#39;生产&#39;它在本地给我同样的问题。我对这种加载文件的方式不是很熟悉,我似乎无法找到任何解决方案,所以任何能够提供答案或指出我正确方向的人都会非常感激。

1 个答案:

答案 0 :(得分:1)

我们正处于推出产品的最后阶段,我们必须实际进行一些聚合。

事实证明这根本不容易。

最简单的方法是NODE_ENV =生产永远启动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

无论如何,这两种方法对我们都没有用。我认为uglification在以正确的顺序加载东西时已经完成了,我们最终得到了一堆控制台错误。

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

即使上述内容对你有用,聚合还有其他问题。例如=&gt; 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 =生产,肯定没有自己做的伎俩。