如何最小化MEAN.JS中用于生产环境的所有js和CSS？

debugcn 发表于 Dev

小猫

我刚刚开发了一个简单的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文件（包括第三方库）的方法或功能？

时音

编辑：

为避免在丑化第三方文件时出错，请仅.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/

希望这可以帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。