Завдання watch виконуватиметься кожного разу при зміні та збереженні файлу. Все, що нам потрібно зробити, це стежити за певними файлами і сказати, що робити, коли ці файли зміняться. Давайте відійдемо від базової конфігурації build, яку ми використовували раніше і зробимо поділ на стилі та скрипти. Ми робимо так тому, що хочемо задати різні задачі для кожного типу файлів.
<code data-language="javascript">//автооновлення watch: { //для стилів стежимо тільки за CSS і Less-файлами //і запускаємо less і cssmin: { files: ['src//*.css', 'src//*.less'], tasks: [ 'less', 'cssmin'] }, //для скриптів запускаємо jshint та uglify scripts: { files: 'src/**/*.js', tasks: ['jshint', 'uglify'] }
}
}); Ми налаштували watch, щоб стежити за файлами стилів та скриптів. У консолі виконайте:
<code>$ grunt watch
Тепер ми можемо бачити як Grunt слідкує за змінами та виконує необхідні завдання.
На цьому малюнку показано, що JavaScript та CSS-файли були змінені. Відповідні завдання виконалися, і ми можемо переходити до розробки! Це дуже потужний інструмент, тому що щоразу при збереженні файлів ми можемо робити їх аналіз, компілювати Less і навіть мінімізувати зображення.
Висновок
Сподіваюся, цей спрощений погляд на Grunt вдихне у вас деякі ідеї про те, як використовувати Grunt для конкретного процесу. Почати працювати просто — встановіть пакет, налаштуйте його і наберіть grunt! Обов'язково перегляньте офіційну документацію та список плагінів, щоб отримати більше ідей про застосування Grunt.