Як використовувати Grunt для автоматизації вашого робочого процесу [Підручники]

Я величезний прихильник автоматизації тому що це робить життя набагато простішим. Навіщо витрачати час на чорні, одноманітні завдання, які висмоктують вашу життєву силу прямо, коли у вас є комп'ютер, щоб робити речі для вас? Це особливо стосується веб-розробки.

Багато завдань розробки можуть бути рутиною. Під час розробки ви можете скомпілювати код, при натисканні на версію розробки можна об'єднати і мінімізувати файли, видалити ресурси для розробки і так далі. Навіть відносно нескладні, такі як видалення групи файлів або перейменування папок може зайняти великий шматок нашого часу.

У цій статті я покажу вам, як ви можете полегшити своє життя, використовуючи чудову функціональність, яку пропонує Grunt, виконавець завдань Javascript. Я буду вести вас через весь процес, тому не хвилюйтеся, навіть якщо ви не майстер Javascript!

Більше на Hongkiat.com:

CSSMatic робить CSS простим для веб-дизайнерів
Автоматизація завдань у Mac за допомогою дій папки
Автоматизуйте файли Dropbox за допомогою дій
10 додатків для автоматизації завдань на пристрої Android
Як (автоматично) створювати резервні копії вашого сайту в Dropbox

Установка Grunt

Встановлення Grunt досить легко, тому що він використовує менеджер пакетів вузлів. Це означає, що вам також доведеться встановити сам Node. Відкрийте термінал або командний рядок (відтепер я називаю цей термінал) і введіть nmp -v.

Якщо ви бачите номер версії npm встановлено, якщо ви бачите помилку "команда not found", вам доведеться встановити її, перейшовши на сторінку завантаження вузлів і вибравши потрібну версію.

Після встановлення Node, отримання Grunt є питанням однієї команди, виданої в терміналі:

npm install -g grunt-cli

Базове використання

Ви будете використовувати Grunt на основі проектного проекту, оскільки кожен проект матиме різні вимоги. Давайте розпочнемо зараз проект, створивши папку і перейшовши до неї також через наш термінал.

Два файли складають серце Grunt: package.json і Gruntfile.js. Файл пакета визначає всі залежності третьої сторони, які використовує ваша автоматизація, файл Grunt дозволяє керувати як саме вони використовуються. Давайте зараз створимо файл з пакетом "голі кістки" з таким вмістом:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Ім'я та версія залежать від вас, залежність повинна містити всі пакунки, які ви використовуєте. Ми не робимо що-небудь у моменті таким чином ми тільки переконаємось Grunt себе доданий як залежність.

Можливо, ви запитуєте себе, що таке твістелі (~), що називається тильдою.

Версії можуть знадобитися з використанням правил семантичного версії для npm. Коротко:

Ви вказуєте точну версію 4.5.2
Можна використовувати більше / менше, ніж вказати мінімальну або максимальну версію, наприклад > 4.0.3
Використання тильди вказує блок версії. Використання ~ 1.2 вважається такою 1.2.x, будь-яка версія вище 1.2.0, але нижче 1.3

Набагато більше способів визначення версій доступно, але цього достатньо для більшості потреб. Наступним кроком є створення Gruntfile, який буде виконувати наші автоматизації.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

Це в основному скелет для Gruntfile; Є два цікавих місця. Одне місце знаходиться всередині initConfig () функції. Саме тут і відбувається конфігурація вашого проекту. Це буде включати в себе такі, як обробка LESS / SASS компіляції, мінімізація сценаріїв і так далі.

Друге місце розташування знаходиться нижче цієї функції, де ви задаєте завдання. Ви можете бачити одне задане назва “за замовчуванням”. На даний момент він порожній, тому він нічого не робить, але пізніше ми розширимо його. Завдання по суті ставлять в чергу біти і шматки з нашої конфігурації проекту і виконують їх.

Наприклад, завдання з ім'ям “сценарії” може об'єднати всі наші сценарії, а потім зменшити отриманий файл, а потім перемістити його в своє кінцеве розташування. Ці три дії визначені в конфігурації проекту, але є “потягнули разом” за завданням. Якщо це не зрозуміло, але не хвилюйтеся, я покажу вам, як це робиться.

Наша перша задача

Давайте створимо завдання, яке мінімізує для нас один файл javascript.

Є чотири речі, які ми повинні зробити в будь-який час, коли ми хочемо додати нове завдання:

За необхідності встановіть плагін
Вимагайте цього в грунт-файлі
Напишіть завдання
Якщо потрібно, додайте його до групи завдань

(1) Знайти та встановити плагін

Найпростіший спосіб знайти потрібний плагін - це ввести в Google щось на зразок цього: “зменшити плагін JavaScript grunt”. Перший результат повинен привести вас до додатка grunt-contrib-uglify, який саме нам потрібний.

Сторінка Github розповість вам все, що вам потрібно знати. Встановлення - це єдиний рядок у терміналі, ось що потрібно використовувати:

 npm install grunt-contrib-uglify --save-dev

Можливо, вам знадобиться запустити це з привілеями адміністратора. Якщо ви отримаєте щось подібне npm ERR! Будь ласка, спробуйте запустити цю команду знову як root / адміністратор. по дорозі просто введіть sudo перед командою і введіть пароль, коли з'явиться запит:

 sudo npm install grunt-contrib-uglify --save-dev

Ця команда фактично аналізує ваш package.json файл і додає його як залежність, вам не потрібно буде робити це вручну.

(2) Вимагати від Gruntfile

Наступним кроком є додавання до вашого Gruntfile як вимоги. Я хотів би додати плагіни у верхній частині файлу, ось мій повний Gruntfile після додавання grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = функція (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

(3) Створіть завдання для мінімізації сценаріїв

Як ми обговорювали, це має бути зроблено в межах initConfig () функції. Сторінка Github для плагіна (і більшості інших плагінів) дає вам багато інформації та прикладів. Ось що я використав у своєму тестовому проекті.

 uglify: build: src: 'js / scripts.js', де: 'js / scripts.min.js'

Це досить просто, я вказав scripts.js файл у каталозі js мого проекту та пункт призначення для файлу з обмеженим доступом. Існує багато способів вказати вихідні файли, ми розглянемо це пізніше.

Наразі давайте подивимося на повний Gruntfile після того, як це було додано, щоб переконатися, що ви знаєте, як справляються речі.

 module.exports = функція (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ;

(4) Додайте цю конфігурацію до групи завдань

Зараз ви можете перейти до свого терміналу і набрати тип хрюкання потворно але нам потрібні групи завдань для виконання декількох завдань пізніше. Ми маємо завдання за замовчуванням порожнє, лише чекаємо, щоб щось було додано, так що давайте змінюємо його на наступне:

 grunt.registerTask ('default', ['uglify']);

На цьому етапі ваш повинен бути в змозі перейти до терміналу, типу хрюкати і побачте, як відбувається згортання. Не забудьте створити scripts.js файл звичайно!

Це не займе багато часу, щоб створити це зробив? Навіть якщо ви новачок у всьому цьому, і вам знадобилося деякий час, щоб пропрацювати кроки, час, який він заощадить, перевершить час, витрачений на нього в межах кількох застосувань..

Об'єднання файлів

Давайте подивимося на об'єднання файлів і Дізнайтеся, як вказати декілька файлів як цілі по дорозі.

Конкатенація - це процес об'єднання вмісту декількох файлів в один файл. Нам знадобиться плагін grunt-contrib-concat. Давайте працюємо за такими кроками:

Щоб встановити плагін, використовуйте npm install grunt-contrib-concat --save-dev в терміналі. Після того, як це зроблено, переконайтеся, що додайте його до вашого Gruntfile так само, як перед використанням grunt.loadNpmTasks ('grunt-contrib-concat');.

Далі йде конфігурація. Давайте об'єднаємо три конкретні файли, синтаксис буде знайомий.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], де: 'js / scripts.js', ,,

Наведений вище код містить три файли, вказані в якості джерела, і поєднує їх у файл, вказаний як адресат.

Це вже досить потужний, але що, якщо новий файл буде додано? Чи потрібно постійно приходити сюди? Звичайно, ні, ми можемо вказати всю папку файлів для об'єднання.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,,

Тепер будь-який файл javascript в папці dev / js буде об'єднано в один великий файл: js / scripts.js, Значно краще!

Тепер настав час створити завдання, щоб ми могли фактично об'єднати деякі файли.

 grunt.registerTask ('mergejs', ['concat']);

Це більше не є завданням за замовчуванням, тому нам потрібно буде ввести його ім'я в терміналі, коли ми видаємо хрюкати команду.

 grunt mergejs

Автоматизація нашої автоматизації

Ми вже досягли значного прогресу, але більше! Наразі, коли потрібно об'єднати або мінімізувати, потрібно перейти до терміналу і ввести відповідну команду. Настав час подивитися на дивитися команда, яка зробить це за нас. Ми також навчимося виконувати багатозадачні завдання одночасно.

Для того, щоб піти ми будемо потрібно взяти grunt-contrib-watch. Я впевнений, що ви можете встановити його і додати до Gruntfile на yuor досі, так що я почну, показуючи вам, що я використовую в тестовому проекті.

 watch: scripts: files: ['dev / js / *. js'], завдання: ['concat', 'uglify'],,

Я назвав набір файлів для перегляду “сценарії”, так що я знаю, що він робить. У цьому об'єкті я вказав файли для перегляду та виконання завдань. У попередньому прикладі конкатенації ми зібрали всі файли в каталозі dev / js.

У прикладі зменшення ми зменшили цей файл. Має сенс дивитися папку dev / js на зміни і запускати ці завдання, коли вони є.

Як ви можете бачити, декілька завдань можна легко викликати, розділяючи їх комами. Вони будуть виконуватися в послідовності, спочатку конкатенації, потім згортання в цьому випадку. Це також може бути зроблено з групами завдань, що є причиною їх існування.

Тепер ми можемо змінити завдання за умовчанням:

 grunt.registerTask ('default', ['concat', 'uglify']);

Тепер у нас є два варіанти. Всякий раз, коли ви хочете об'єднати і мінімізувати ваші скрипти, ви можете переключитися на термінал і ввести тип хрюкати. Ви також можете скористатися командою watch, щоб ініціювати перегляд ваших файлів: хрюкати дивитися.

Він буде сидіти там, чекаючи, поки ви зміните ці файли. Як тільки ви зробите це, він виконає всі завдання, які він поклав на нього, продовжуйте, спробуйте.

Це набагато краще, від нас не потрібний вхід. Тепер ви можете працювати з файлами, і все буде добре зроблено для вас.

Огляд

З цим елементарними знаннями про те, як плагіни можуть бути встановлені і використані і як працює команда спостереження, ви все готові стати наркоманом автоматизації самостійно. Існує набагато більше, ніж Грант, ніж те, що ми обговорювали, але нічого, чого ви не змогли б самостійно впоратися.

Використання команд для компіляції SASS, оптимізації зображень, автоматичного виправлення і багато чого іншого - це лише питання виконання слідуючих кроків і читання синтаксису, який вимагає плагін.

Якщо ви знаєте про деякі особливо великі використання Grunt, будь ласка, повідомте нам у коментарях, ми завжди зацікавлені почути, як ви використовуєте такі інструменти, як Grunt!