如何在生产环境中缩小 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实际上只是"minified"，而不是"uglified"，变量名仍然和原来的一样，而且很长。

总之，MEAN.JS是否已经提供了可以"uglified"所有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 方文件，我建议采取以下步骤：

将您的供应商文件添加到您的 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/

希望对您有所帮助。

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

How to minify all js and css in MEAN.JS for production environment?

javascript

node.js

meanjs