Щоб задати налаштування для Grunt, ми скористаємося файлом Gruntfile.js. Це те місце, де за замовчуванням зберігається конфігурація для запуску. для нашого проекту.
<code data-language="javascript">//Gruntfile.js //наша функція-обгортка (потрібна для Grunt та його плагінів) //всі налаштування розташовуються всередині цієї функції module. exports=function(grunt) { //===========================================================================//НАЛАШТУВАННЯ GRUNT===========================================================//===========================================================================grunt.initConfig({ //отримати конфігурацію з package.json //так ми можемо використовувати штуки на зразок name і version (pkg .name) pkg: grunt.file.readJSON('package.json'), //вся конфігурація буде тут }); //===========================================================================//ЗАВАНТАЖЕННЯ ПЛАГІНІВ GRUNT===================================================//===========================================================================//ми можемо їх завантажити, тільки якщо вони знаходяться в нашому package.json //переконайтеся, що ви запустили npm install, щоб наша програма могла їх знайти grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); }; Будемо використовувати функцію module.exports (обгортка). Це спосіб показати нашу конфігурацію решти програми. Не турбуйтеся надто з цього приводу, але якщо вам цікаво прочитайте цю чудову статтю на тему. Всередині grunt.initConfig() отримуємо інформацію з package.json і зберігаємо її у pkg. За рахунок цього можна використовувати атрибути з нашого файлу package.json. Можна назвати ім'я проекту, використовуючи pkg.name та версію через pkg.version. Можна розширити та навіть додати автора. Навіщо це потрібно? Гарне питання. Ми побачимо як застосовувати це далі, але одна з класних штук, яку можна робити — це використовувати згадані атрибути для додавання коментарів у верхній частині файлів з назвою проекту, автором, датою створення і версією! Досить наочно. Також завантажуємо необхідні плагіни Grunt через grunt.loadNpmTasks(). Це спосіб застосування плагінів, які ми одержали раніше через npm. Налаштування пакета
Газова конфігурація Grunt готова і тепер поглянемо на налаштування одного з наших пакетів. Почнемо з пакету JSHint, який аналізує наші файли JavaScript і повідомить про виникнення будь-яких помилок. Це спосіб вказати Grunt, які ми хочемо аналізувати, мінімізувати або зробити з ними щось ще. Для налаштування пакета переходимо до розділу grunt.initConfig(), який містить наступну базову структуру:
<code data-language="javascript">//Gruntfile .js grunt.initConfig({ //налаштування jshint для валідації JS-файлів jshint: { options: { reporter: require('jshint-stylish') //використовуйте jshint-stylish для наочного уявлення помилок }, //при запуску цього завдання аналізується файл Gruntfile.js і всі JS-файли в src build: ['Gruntfile.js', 'src/**/*.js'] }
});Це основний формат для налаштування наших пакетів. У ньому відбувається:
- Виклик пакета на його ім'я (jshint).
- Налаштування параметрів, якщо вони потрібні. Зазвичай їх можна знайти в документації для кожного конкретного пакета.
- Створення атрибуту build та перехід до файлів, папок або ще за бажанням. >
Угоди за іменами
При позначенні завдань ми назвемо наше головне завдання build. Ви можете назвати її як забажаєте і до того ж створити кілька завдань. При запуску Grunt усі завдання будуть виконані автоматично. Якщо ви хочете створити завдання через налаштування jshint, то можете назвати їх dev та production. Потім ми можемо викликати завдання через jshint:dev або jshint:production. Тепер, коли ми розглянули базове налаштування пакета Grunt, перейдемо до конфігурації наших завдань.
Аналіз JavaScript-файлів
Ось конфігурація для аналізу файлів JavaScript. Вона така сама, як і в наведеному вище прикладі. Ми також звертаємося до пакету jshint-stylish, щоб отримати наочний висновок помилок. файлів jshint: { options: { reporter: require('jshint-stylish') //використовуйте jshint-stylish для наочного уявлення помилок }, //при запуску цього завдання аналізується файл Gruntfile.js і всі JS-файли в src build: [ 'Gruntfile.js', 'src/**/*.js'] } });
Додамо деякий JS у файл src/js/magic.js.
<code data-language="javascript">//src/js/magic.js var hello='Я є Grunt!' var awesome='Так, це здорово!'
Тепер якщо ми виконаємо
<code>$ grunt jshint
командному рядку, то побачимо аналіз Gruntfile.js та всіх JS-файлів усередині папки src.
Ми можемо вказати стежити за всіма JS-файлами в нашому додатку, певними файлами або всіма файлами в цій папці за допомогою ** для всіх папок та * для всіх файлів. З аналізом закінчили, тепер перейдемо до мінімізації.