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

【问题标题】：How to minify all js and css in MEAN.JS for production environment?如何为生产环境缩小 MEAN.JS 中的所有 js 和 css？
【发布时间】：2015-08-15 00:01:45
【问题描述】：

我刚刚开发了一个简单的 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实际上只是“缩小”，而不是“丑化”，变量名还是和原来一样，而且很长。

简而言之，MEAN.JS 是否已经提供了可以“丑化”所有 js 和 css 文件包括第三方库的方法或功能？

【问题讨论】：

您需要将 javascript 和 css 混淆器集成到您的构建过程中，以使最终的缩小文件“丑化”。有很多可用的。我的建议是您进行谷歌搜索并寻找更适合您的构建过程的那个。 google.com/…

标签： javascript node.js meanjs

【解决方案1】：

编辑：

为避免在 uglifying 3rd 方文件时出错，请仅在您的 config/env/all.js 文件中包含未缩小的 3rd 方 .js 文件。

目前，您的 grunt build 任务会丑化您的应用程序 javascript 文件，但不会丑化您的 3rd 方 javascript 文件。它通过您的grunt.js 文件中的uglify 任务执行此操作。

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

如果你想丑化你的 3rd 方文件，我建议采取以下步骤：

将您的供应商文件添加到您的 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 时，您应该在public/dist/ 文件夹中同时获得applicaiton.min.js 文件和vendor.min.js 文件。

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

这里有一个更详细的过程描述：https://blog.dylants.com/2014/11/19/bundling-production-assets-for-mean-js/

希望这会有所帮助。

【讨论】：