Сборка JS и CSS для продакшена при помощи npm grunt
В жизни каждого программиста мужика начинается период, когда размер и количество js файлов в проекте начинает невероятно множиться. И если для разработки это не особо мешает, а даже наоборот помогает структурировать информацию, для для продакшена это зло. Когда браузер пытается выкачать при загрузке страницы 50+ файлов css и js, случается так, что ему становится плоховато. Да и скорость рендеринга падает значительно. Есть решение: grunt. Пакет для npm который позволяет отслеживать изменения файлов в некоторых папках, а при изменении формировать один (несколько) выходных сжатых файлов.
Установка:
|
1 2 3 |
npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev |
Для настройки необходимо создать файл Gruntfile.js. У меня вышло примерно такое содержимое:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
module.exports = function(grunt) { grunt.initConfig({ // 1. эти файлы сжимаем uglify: { my_target: { files: { 'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'], 'public/js/main.min.js': ['assets/js/main.js'] } } }, // 2. задача по отслеживанию изменений watch: { source: { files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'], tasks: ['uglify'], //сжимаем options: { livereload: true } } } }); // 3. Сообщаем, какие плагины мы собираемся использовать grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие // 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале. grunt.registerTask('default', ['uglify']); grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений }; |
Теперь если в консоли введёте:
|
1 2 |
grunt watch |
То запустится и будет висеть задача отслеживания изменений и минимификации файлов.