javascript - 如何在生产环境中缩小 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实际上只是“缩小”，而不是“丑化”，变量名称仍然与原始相同，而且很长。

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

Answer 1

编辑:

为避免丑化第 3 方文件时出现错误，请仅在 config/env/all.js 文件中包含未缩小的第 3 方 .js 文件。

<小时/>

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

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

如果您想丑化您的第 3 方文件，我建议您采取以下步骤:

将 vendor 文件添加到 grunt.js 文件和 uglify 任务中:

更改配置对象(大约第 170 行)以包含您的 vendor 文件:

// 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 文件以反射(reflect)新的 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/

希望这有帮助。