GruntJS. Основи.

Привіт, Друже. В цій статті ми розглянемо, як використовувати Grunt у проектах, щоб пришвидшити розробку вебсайтів. Перед тим, як заглибитсь у процес налаштування та використання різноманітних плагінів, що роблять всю “брудну” роботу з підняття проекту, ми коротко розглянемо, що може робити Grunt.


Огляд

Отож, коротко, про що йтиметься у цій статті.

  • Що таке GruntJS і з чим його їсти? або ж WTF GruntJS? ;-)
  • Концепція та ключові поняття.
  • З чого і як почати?
  • Координати “граблів”, на які довелося наступити m( мені
  • Куди рухатися далі.

WTF GruntJS

Навіщо вам Grunt?

Більшість розробників погодяться, що швидкість і темпи розвитку JavaScript впродовж останніх років вражаючі. Разом з такими надбудовами, як Backbone.js чи Ember.js або з спільнотами, накшталт JS Bin, розвиток цієї мови змінює не лише наші враження від вебсайтів в ролі користувачів, але і те, як ми їх будуємо. Коли ви працюєте з JavaScript, вам, швидше за все, потрібно виконувати багато завдань регулярно. В деяких проектах, це забирає багато часу і стає рутинною, повторюваною роботою. Належачи до такої активної спільноти, ви припускаєте, що є якісь інструменти для автоматизації та прискорення цього процесу. Ось тут і приходить на допомогу Grunt.

Що таке Grunt?

Написаний на Node.js, Grunt є орієнтованим на завдання інструментом з інтерфейсом командного рядка, який прискорює робочі процеси шляхом зменшення кількості зусиль, необхідних для підготовки проекту. Це відбувається шляхом розділення роботи на завдання, які виконуються автоматично в процесі розробки. Загалом, ви можете використовувати Grunt для більшості завдань, які ви вважаєте придатними для автоматизації і які доведеться налаштовувати вручну та запускати самотужки. Тоді як більш ранні версії, орієнтувались на такі плагіни, як JSHint і Uglyify, новіші випуски спираються на плагіни для будь-чого. Які завдання? Ну, перелік є вичерпним. Досить сказати Grunt може впоратися з більшістю речей, які ви кидаєте на нього, від мініфікації до об'єднання JavaScript файлів. Він також може бути використаний для цілого ряду завдань, не пов'язаних з JavaScript, таких як компілювання CSS з препроцесорів, як LESS та Sass. Або ж для тестування.

Чому саме Grunt?

Grunt далеко не єдиний Task Runner. Серед найпопулярніших : GulpJS та BroccoliJS. Є ще варіації, накшталт CakeJS та інших, але це питання стосується більше естетичних уподобань, а ніж технічних відмінностей ;-) Отож, чим хороший Grunt… він найпопулярніший, тому для нього написано найбільше плагінів і по ньому є найбільше прикладів/уроків/питань-відповідей. Для Grunt є досить хороша(ІМХО) документація на його офіційній сторінці. Він простий у використанні для початківців і має багато можливостей для професіоналів. Але, мабуть, найосновнішим чинником його популярності є те, що Grunt активно розробляється і просувається компанією Google ;-) Думаю на цьому з “водичкою” покінчимо.


Концепція та ключові поняття.

Ідея утиліти

Grunt - це, по суті, утиліта для збирання проектів з командної стрічки. Це працює так: command line interface (CLI) кожного разу, коли ви вводите команду grunt (ця команда викликає набір завдань, вказаний вами за промовчанням - зазвичай це завдання для підготовки коду до продакшину) шукає локально встановлений модуль відповідної версії, якщо не знаходить його локально, то шукає вище по ієрархії аж до глобального рівня модулів. Якщо і глобально цей модуль не встановлено - видає відповідну помилку. Якщо локально встановлений Grunt знайдено, CLI починає завантажувати бібліотеки, відповідно до вашого конфігураційного файлу. Далі Grunt виконує всі завдання, які ви попросите(запустите, попередньо зазначивши в конфігураційному файлі). Всі ці процеси відбуваються за допомогою NPM - Node Package Manager(поставляється разом з Node.Js в кількох найновіших версіях Node.Js).

package.json

package.json - основний конфігураційний файл проекту. Його поміщають в кореневу директорію проекту, як і gruntfile.js, і записують туди загальну інформацію про проект, його автора та назви зовнішніх модулів, від яких залежить проект, із зазнвченням відповідної версії.

створення та налаштування

Є кілька способів створити цей конфігураційний файл. Найпопулярніші з них:

  • Скористатися спеціальною утилітою каркасування проекту, grunt-init. ЇЇ потрібно попередньо всановити(рекомендують глобально). Роблять це командою :

<console> npm install -g grunt-init </console>

  • Використати базові налаштування пакетного менеджера NPM. Користуючись командою з консолі і відповідаючи на питання. Наприклад,

<console> npm init

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> –save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit.

name: (Projects) someAppName version: (0.0.0) 0.0.1 description: Some project description should be there entry point: (index.js) main.js test command: git repository: keywords: author: Vira Lytvyn license: (ISC) About to write to \path\to\project\root\package.json: {

"name": "someAppName",
"version": "0.0.1",
"description": "Some project description should be there",
"main": "main.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Vira Lytvyn",
"license": "ISC"

}

Is this ok? (yes) </console>

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

{ “name”: “my-project-name”, “version”: “0.1.0”, “devDependencies”: { “grunt”: ”~0.4.5”, “grunt-contrib-jshint”: ”~0.10.0”, “grunt-contrib-nodeunit”: ”~0.4.1”, “grunt-contrib-uglify”: ”~0.5.0” } }

Корисні зауваження

  • package.json ДУЖЕ:!: небажано заносити в .gitignore : важливо, щоб команда розробників використовувала однакові налаштування, а також його варто коміти, якщо ви робили якісь зміни, при цьому обов'язково додатково повідомити своїм колегам по проекту, якщо ви встановлювали якийсь новий плагін(краще, якщо вони дізнаються про це від вас ;-)).
  • якщо ви працюєте з вже готовим проектом, а не створюєте його, то інсталювати всі модулі відповідних версій можна однією командою <console> npm install </console>, при цьому виконувати її слід в тій же директорії, в якій розміщений package.json
  • інша корисна команда <console> npm update </console> не просто встановить всі залежності, а й оновить модулі до останньої версії, якщо така не використовується
  • якщо ви вирішили використовувати новий модуль, його можна встановити командою
    • <console> npm install package-name </console>, але так робити не варто, бо залежність від цього модуля не запишеться в конфігураційний файл, хіба ви допишете її вручну,
    • краще це робити командою <console> npm install package-name –save-dev </console>, щоб додати модуль як залежність для розробки(записати його в масив “devDependencies” конфігураційного файлу),
    • або ж командою <console> npm install package-name –save </console>, щоб додати модуль як залежність для запуску(записати його в масив “dependencies” конфігураційного файлу).

Тут можна знайти відносно коротке, але вичерпне і аргументоване пояснення, чим згадані залежності відрізняються.

Gruntfile.js

NpmTask vs Task


З чого і як почати?


Куди рухатися далі


В останнє змінено: 2015/03/08 14:22