如何将MEAN.JS中的所有js和css缩小到生产环境?
我刚开发了一个简单的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文件path已经在MEAN.JS环境configuration文件中。
同时,js文件的application.min.js
实际上只是被“缩小”了,而不是“丑化”,variables的名字还是原来的,很长。
总之,MEAN.JS已经提供了能够“丑化”包括第三方库在内的所有js和css文件的任何方式或function吗?
编辑:
为了避免uglifying第三方文件时出现错误,请仅在您的config/env/all.js
文件中包含非缩小的第三方.js
文件。
目前,你的grunt build
任务丑化你的应用程序JavaScript文件,但不是你的第三方JavaScript文件。 它通过grunt.js
文件中的grunt.js
任务来完成。
uglify: { production: { options: { mangle: false }, files: { 'public/dist/application.min.js': 'public/dist/application.js' } } },
如果你想uglify你的第三方文件,我build议采取以下步骤:
将您的供应商文件添加到您的grunt.js
文件和grunt.js
任务:
更改configuration对象(在第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
添加到您的vendorJavaScriptFiles
任务中:
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/
文件夹中同时获得一个vendor.min.js
文件和一个vendor.min.js
文件。
为了清楚起见,我将它们分开,但如果您愿意的话,可以将它们组合成一个application.min.js
文件。
这是一个更详细的过程说明: https : //blog.dylants.com/2014/11/19/bundling-production-assets-for-mean-js/
希望这可以帮助。