如何缩小MEAN.JS中生产环境中的所有js和css？

Question

我刚刚开发了一个简单的MEAN.JS应用程序。 MEAN.JS提供了一个命令grunt build，可以帮助我缩小位于以下文件夹中的js和css文件

css: [
    'public/modules/**/css/*.css'
],
js: [
    'public/config.js',
    'public/application.js',
    'public/modules/*/*.js',
    'public/modules/*/*[!tests]*/*.js'
]

但是如何缩小与bower一起安装并位于public/lib/...的第三方库？所有需要的js和css文件路径都已经在MEAN.JS环境配置文件中。

同时，缩小的js文件application.min.js实际上只是缩小了＆＃34;而不是＆＃34; uglified＆＃34;，变量＆＃34;名称仍然与原始名称相同且非常长。

简而言之，MEAN.JS已经提供了任何可以＆＃34; uglified＆＃34;所有的js和css文件包括第三方库？

Answer 1

修改

为了避免在第三方文件使用时出错，请在.js文件中仅包含未缩小的第三方config/env/all.js文件。

目前，您的grunt build任务会破坏您的应用程序JavaScript文件，但不会破坏您的第三方JavaScript文件。它通过uglify文件中的grunt.js任务执行此操作。

uglify: {
 production: {
  options: {
    mangle: false
  },
  files: {
    'public/dist/application.min.js': 'public/dist/application.js'
  }
 }
},

如果您想要升级第三方文件，我建议您执行以下步骤：

将您的供应商文件添加到grunt.js文件和uglify任务中

更改配置对象（第170行）以包含供应商文件：

// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
    var init = require('./config/init')();
    var config = require('./config/config');

    // insert vendor files
    grunt.config.set("vendorJavaScriptFiles", config.assets.lib.js);
    // note: you can do the same for your css files
    grunt.config.set("vendorCSSFiles", config.assets.lib.css);

    grunt.config.set('applicationJavaScriptFiles', config.assets.js);
    grunt.config.set('applicationCSSFiles', config.assets.css);
});

将vendorJavaScriptFiles添加到uglify任务中：

uglify: {
    production: {
        options: {
            mangle: false
        },
        files: {
            'public/dist/application.min.js': 'public/dist/application.js',
            'public/dist/vendor.min.js': '<%= vendorJavaScriptFiles %>'
        }
    }
}

更改您的config/env/production.js文件以反映新的vendor.min文件：

assets: {
    lib: {
        css: [
            'public/lib/bootstrap/dist/css/bootstrap.min.css',
            'public/lib/bootstrap/dist/css/bootstrap-theme.min.css',
            // note you can follow a similar process for your css files
        ],
        js: 'public/dist/vendor.min.js'
    },
    css: 'public/dist/application.min.css',
    js: 'public/dist/application.min.js'
}

现在，当您运行grunt build时，您应该在applicaiton.min.js文件夹中同时获得vendor.min.js个文件和public/dist/文件。

为了清楚起见，我将它们分开了，但如果您愿意，可以将它们合并到一个application.min.js文件中。

以下是该流程的更详细说明：https://blog.dylants.com/2014/11/19/bundling-production-assets-for-mean-js/

希望这有帮助。