Використовуватимемо той самий формат. Викличемо пакет uglify, налаштуємо його і вкажемо, які файли використовувати і створити.
<code data-language="javascript">//Gruntfile.js grunt.initConfig({ //отримати конфігурацію з package.json //так ми можемо використовувати штуки на зразок name і version (pkg.name) pkg: grunt.file.readJSON('package.json'), ... //налаштування uglify для мінімізації JS-файлів uglify: { options: { banner : '/*\n <%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd") %> \n*/\n' }, build: { files: { 'dist/js/magic.min.js': 'src/js/magic.js' }
}
}
});Тут налаштовується параметр з ім'ям banner, він додасть хороший коментар угорі нашого мінімізованого файлу. Зверніть увагу, що ми використовуємо pkg.name із файлу package.json. Всередині build ми визначаємо файл, який бажаємо створити (dist/js/magic.min.js) із вихідного файлу (src/js/magic.js). Нам потрібно більше коду у файлі, ніж просто якісь два рядки зроблених раніше, тому попрацюємо з гігантським файлом для мінімізації. Візьмемо jQuery. Скопіюйте вміст несжатого файла jQuery та вставте його у src/js/magic.js. Бачите, який класний коментар на початку файлу? Ми зробимо так само за допомогою параметра banner. Тепер настав час мінімізувати наш файл. Перейдіть у консоль і наберіть:
<code>$ grunt uglify
Ми зменшили оригінальний файл розміром 360 Кб до скромних 97.1 Кб!
Мінімізація декількох файлів в один
Можна зробити набагато більше, ніж просто мінімізувати єдиний файл — взяти кілька файлів і зменшувати їх у один вихідний файл. Це може прискорити наші сайти, оскільки ми обробляємо лише один JS-файл для відвідувачів. Налаштування декількох файлів досить просте:
<code data-language="javascript">//Gruntfile.js grunt.initConfig({ //отримати конфігурацію з package.json //так ми можемо використовувати штуки на зразок name і version (pkg.name) pkg: grunt.file.readJSON('package.json'), ... //налаштування uglify для мінімізації JS-файлів uglify: { options: { banner: '/*\n <%=pkg.name %><%=grunt.template.today("yyyy-mm-dd") %>\n*/\n' }, build: { files: { 'dist/js/magic .min.js': ['src/js/magic.js', 'src/js/magic2.js'] }
}
}
});У цьому прикладі ми беремо два вказаного файлу та мінімізуємо їх у magic.min.js. Можна також застосувати коротку форму, яку ми дізналися раніше і просто сказати, мінімізувати всі JS-файли в папці src. Для цього ви повинні використовувати src/**/*.js.