Готуємо ASP.NET5, випуск №5 — Gulp і Bower поспішають на допомогу

Ми продовжуємо нашу колонку по темі ASP.NET5 публікацією від В'ячеслава Бобика — .NET-розробника з компанії Radario. У цій статті В'ячеслав цікаво розповідає про застосуванні з ASP.NET5 популярних інструментів автоматизації Gulp і Bower c інтеграцією в Visual Studio. Попередні статті з колонки завжди можна прочитати за посиланням #aspnetcolumn — Володимир Юнев
В наші дні client-side розробка ставати не менш складною, ніж розробка server-side. Сучасному frontend розробнику доводиться вирішувати безліч рутинних завдань, таких як: препроцессинг Lass/Scss/Stylus, написання вендорских префисксов, поспроцессинг css, склеювати стилі в один файл і багато іншого.


Так само, якщо в команді більше одного frontend розробника, не погано б використовувати линтеры для валідації js файлів ще до того, як вони потраплять у продакшн. Якщо виконувати всі ці завдання вручну, то на це піде левова частка робочого часу, а рішення бізнес-задач нічого не залишиться.

Тому у frontend розробників є досить потужні инстументы, які беруть на себе виконання множетсва рутинних завдань, такі як: gulp і bower, а в новому ASP.NET5 вони поставляються з коробки. Давайте розглянемо на прикладі ASP.NET5 додатки, як ми можемо використовувати gulp і bower.

Gulp
Gulp — це утиліта для автоматизації складання проекту і поліпшення робочого процесу. Основна одиниця виконує наше завдання так і називається — task. Давайте створимо порожній ASP.NET5 проект.



В корінь проекту додамо NPM Configuration file і назвемо його package.json



Щоб використовувати gulp в нашому проекті, його необхідно встановити. Для цього у файлі package.json, «devDependencies» пишемо "gulp": "3.9.0". Всі завдання для gulp описуються в спеціальному для нього файлі — Gulp configuration file, додамо його.



Після додавання файлу, він за замовчуванням містить змінну gulp, та завдання з ім'ям default. Якщо ми напишемо всередині завдання console.log ("Hello Gulp"); і виконаємо її (для цього правою кнопкою миші клацнути по gulp.js і клікнути по Task Runner Explorer, далі двічі гукнемо по завданню default).


у нас з'явиться наступне вікно, в якому ми і побачимо результат роботи нашої задачі



Після невеликого hello-world, давайте напишемо щось більш корисне, наприклад процесинг з less в css.

Спочатку необхідно підключити gulp-less плагін, для цього відкриваємо знову package.json і в "devDependencies" необхідно додати "gulp-less": "3.0.3".

Створимо простий main.less файл з таким вмістом:

@base: #f938ab;

.main {
color: @base
}

В результаті, наш проект повинен виглядати якось так:



Тепер в gulp.js додамо ініціалізацію gulp-less плагіна, а так само завдання по процесингу з less в css.

var gulp = require('gulp'),
less = require('gulp-less');

gulp.task('less', function () {
gulp.src('./Content/less/**/*.less')
.pipe(less())
.pipe(gulp.dest('./wwwroot/' + 'css'));
});

gulp.task('default', function () {
console.log("Hello Gulp"); });

Що робить gulp дуже витонченим інструментом — це технологія передачі даних для організації процесу складання. Оскільки всі дані передаються безпосередньо в буфер, зникає необхідність у створенні тимчасових файлів. Вся робота всередині завдання відбувається у вигляді конвеєра(pipe). У задачі 'less' ми на вхід подаємо наші less файли, процессим їх, і зберігаємо в директорію wwwroot/css. У новому ASP.NET5 директорія wwwroot є домашньою директорій для проекту, тому всі статичні файли слід зберігати в неї. Після виконання завдання наш проект буде виглядати так:



Файл core.css буде містити в собі:

body {
color: #f938ab;
}

Ми розглянули приклади прості приклади рівня hello-world, але в реальних проектах зазвичай все трохи складніше, і вже простим виконанням завдань не відбудешся. Якщо перед запуском однієї задачі нам необхідно виконати каик-то підготовчі дії? Для цього gulp дозволяє нам використовувати dependent task, коли виконання однієї задачі залежить від іншої.

Давайте створимо просту задачу, яка пише в лог:

gulp.task('дитина', function () {
console.log('hello from dependent gulp task')
}); і модифікуємо нашу задачу по препроцессингу less ось таким чином:

gulp.task('less', ['дитина'], function () {
gulp.src('./Content/less/**/*.less')
.pipe(less())
.pipe(gulp.dest('./wwwroot/css'));
}); 

Запустимо завдання less, і якщо все вийшло, то ми побачимо наступне:



Як ми бачимо, досить легко і зручно gulp позбавляє нас від рутинних завдань.

Bower
У світі server-side розробки якщо ми хочемо включити в проект якусь сторонню бібліотеку, то перше, що приходить на розум це встановити її за допомогою пакетного менеджера наприклад: nuget, gem або easyinstall. Ідея керувати залежностями в проекті за допомогою «пакетів» дуже зручна і стара як світ, однак для client-side тільки в 2012 році, зусиллями двох розробників з Twitter, було покладено початок для bower. Bower — це менеджер пакетів для зеба, який досить швидко став стандартом де фактом в управлінні залежностями для front-end розробки.

ASP.NET5 не став винятком, і кращим способом встановлення front-end бібліотек(jquery, bootstrap, і т. д), як раз є bower. Давайте подивимося на нього в дії.

За опис всіх client-side залежностей у проекті відповідає Bower Configuration File, додамо його в проект.



Тепер, давайте додамо в наш проект jquery. Для цього відкриємо bower.json і в "dependencies" додамо "jquery": "2.1.4", visual studio, за допомогою автокомплита, покаже нам останню стабільну версію пакету.


Зверніть увагу на те, що версія пакету одна, а bower запропонував нам три варіанти. Вся справа в тому, що на версионирования пакетів bower використовує semantic versioning. Тильда "~" означає, що bower завантажить версію 2.1.4 та будь-які виправлення до неї. Наприклад, якщо ми вирішимо оновити наші пакети через bower update і наступна версія jquery 2.1.5, то bower оновлює її. У разі якщо ж наступна версія jquery 2.2.0 або 3.0 bower проігнорує оновлення. Символ "^" говорить bower завантажувати будь-які версії бібліотеки в межах >=2.1.4 < 2.0.0.

Природно, якщо це необхідно, ми можемо вказати версію нижче, але для прикладу скористаємося останньої. Зберігаємо файл(Ctrl + S), і visual studio автомагіческі скачає нам пакет з jquery, і положет його в wwroot/lib. Дерево нашого проекту тепер виглядає якось так:



Як ми бачимо пакет містить не тільки потрібний нам jquery.js, а ще багато всього. На мій погляд це невеликий мінус bower пакетів, який вирішується досить просто: ми можемо написати не складну gulp task для видалення всього зайвого з wwroot. Для використання jquery залишилося вставити у в'ю(або лэйаут) посилання виду.

<script src="~/lib/jquery/dist/jquery.js"></script>. Якщо шлях здається довгим і не дуже гарним, то знову ж таки, це все можна вирішити з допомогою gulp.

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

Висновок
У цій статті ми дізналися про основні інструменти client-side розробки в ASP.NET 5. Спробували виконання простих і залежних задач на gulp, зупинилися на установці пакетів з допомогою bower, який дозволяє уникнути «dependency hell» в проекті. Здорово, що хлопці з Microsoft вбудували ці інструменти ASP.NET 5, і немає потреби витрачати час на налаштування інфраструктури навколо проекту або на написання своїх рішень.

Авторам
Друзі, якщо вам цікаво підтримати колонку своїм власним матеріалом, то прошу написати мені на vyunev@microsoft.com для того, щоб обговорити всі деталі. Ми шукаємо авторів, які можуть цікаво розповісти про ASP.NET та інші теми.

Про автора

Бобик В'ячеслав Борисович,
Розробник .NET у Radario

Молодий .Net програміст, з 3 роками досвіду. Розробник на ASP.NET MVC, автор додатків для Windows і Windows phone.

Ваше ставлення до Bower і Gulp?

/>
/>


<input type=«radio» id=«vv69031»
class=«radio js-field-data»
name=«variant[]»
value=«69031» />
Відмінне! Використовував раніше, буду продовжувати
<input type=«radio» id=«vv69033»
class=«radio js-field-data»
name=«variant[]»
value=«69033» />
Цікаво! Чув раніше, тепер спробую
<input type=«radio» id=«vv69035»
class=«radio js-field-data»
name=«variant[]»
value=«69035» />
Не чув, але зацікавився
<input type=«radio» id=«vv69037»
class=«radio js-field-data»
name=«variant[]»
value=«69037» />
Поки немає інтересу

Проголосувало 39 осіб. Утрималося 4 людини.


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


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.