Как минимизировать все js и css в MEAN.JS для производственной среды?
Я только что разработал простое приложение 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, включая сторонние библиотеки?
1 ответ
РЕДАКТИРОВАТЬ:
Чтобы избежать ошибок при удалении сторонних файлов, включайте только не минимизированные сторонние файлы .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/
Надеюсь это поможет.