Windows 10 Pro Key Windows 10 Home Key irminsol

Базовий gulp проект

Author: Sergio 11.01.2016

Gulp, motherf*cker, do you need it?

— Які плагіни для Gulp ти використовєш у своїй щоденній роботі?
— Що?
— Ніколи не чув про плагін «Що». Це якась сербська назва?
— Що?
— Gulp! Потрібен розробнику Gulp?
— Так!
— Отже, ти розумієш, про кого я кажу?
— Так!
— Опиши мені тоді, для чого потрібен Gulp.
— Що?
— А ну ще раз скажи “що”. СКАЖИ, СКАЖИ ЩЕ РАЗ, “ЩО”!
— Це для автоматизації…
— Він схожий на конструктор сайтів або Brackets?
— Що? (Постріл) Ні-і!
— Ну так чому ж ти намагаєшся  розповідати  що Gulp це зайве?
— Я не намагався!
— Ні, ти намагався, намагався.  Але Gulp  це не просто черговий інструмент для front-end’у, яким ти хочеш його виставити. Ти колись встановлював Node.js?
— Ні!
— Так ось, Gulp це автоматизація завдань і система потокового  збору проектів. І встанови спочатку Node і Bower!

 

Працюючи з front-end трапляється необхідність виконувати багато рутинних дій. Оскільки це темна сторона місяця, адже верстка має заключатись у творочому процесі, а не конвеєрі нудних операцій, то потрібно кидатись на пошук вирішення проблеми. Послужний список повторюваних і механічних задач можна продовжувати на кожній ітерації процесу розробки. Найчастіше доводитись зустрічатись з такими незручними задачами як компіляція sass у css, розставляння вендорних префіксів, компіляція jade, мінімізація стилів і скриптів, стискання зображень, створення спрайтів.

Коли проект готовий до відправлення у публічний реліз, то потрібно забезпечити максимальну швидкість завантаження і мінімальний розмір усіх файлів. Є теоретичний проект “Моя супер верстка”. У задані терміни ми його завершуємо. Для релізу використовуються вже стиснуті і мінімізовані файли. Здається місія успішно виконана. Але з’являється (несподіванка?) потреба виправити деякі стилі, бо структура мекету (раптово!) змінилась. Правити вже стиснуті файли незручно, а через спеціальні сервіси повертати до початково виду усі файли досить проблематично, особливо якщо їх сотні. Тому потрібно дві версії проекту: робочу, яка зрозуміла вам, в яку зручно вносити правки і публічну, вже зібрану з окремих темплейтів і оптимізовану. Для цього нам потрібен Gulp. Не витрачаючи час можна отримати проект в тому вигляді, в якому він повинен бути: оптимізовані картинки,  мінімізовані стилі і скрипти, інше. І навпаки. Проблема рутиних дій отримала своє вирішення.Gulp по суті є набором скриптів, який працює на сервері node.js. Сам node встановити дуже просто, достатньо зайти на офіційний сайт.

Скористаємось командним рядком для встановити gulp за допомогою менеджера пакетів:

npm install gulp -g

 

Для створення базового проекту потрібно виконати кілька кроків

  • Створюємо файл налаштувань для збору проектів (gulp.js)
  • Ініціалузуємо npm, щоб встановити модулі ($ npm init)
  • Встановлюємо gulp з ключем “–save-dev”, тобто в директорії нашого проекту ($ npm install –save-dev gulp)

 

Структура проекту:

Для початку нам знадобиться 2 папки: app, в якій ми будемо писати код, і build, в яку Gulp збиратиме проект. Додамо їх в проект. Вже не потрібно розповідати про зручність і необхідність використання bower. З його допомогою інсталюємо необхідні плагіни

Далі створимо структуру папки app

fonts – шрифти

images – картинки

js – скрипти.

scss – стилі.

scss/partials – стилі окремих блоків

templates – окремі блоки, які потім підключатимуться в основний index.html файл

 

 

Налаштування Gulp-файлу

Для початку необхідно вказати в нашому  gulpfile.js всі пакети і плагіни, які ми будемо використовувати в завданнях (і переконатися, що вони присутні в package.json):

var gulp = require(‘gulp’),
watch = require(‘gulp-watch’),
autoprefixer = require(‘gulp-autoprefixer’),
uglify = require(‘gulp-uglify’),
sass = require(‘gulp-sass’),
sourcemaps = require(‘gulp-sourcemaps’),
fileinclude = require(‘gulp-file-include’),
cssmin = require(‘gulp-minify-css’),
imagemin = require(‘gulp-imagemin’),
pngquant = require(‘imagemin-pngquant’),
rimraf = require(‘rimraf’),
browserSync = require(“browser-sync”),
reload = browserSync.reload,
concat = require(‘gulp-concat’),
bowerMain = require(‘bower-main’),
wiredep = require(‘wiredep’).stream;

 
gulp-watch — потрібен для спостереження за змінами файлів.
gulp-autoprefixer — автоматично додає вендорні префікси до CSS
gulp-uglify  — мінімізація JS
gulp-sass — для компіляції коду в  SCSS
gulp-sourcemaps — для генерації CSS sourscemaps
gulp-file-include — для підключення файлів
gulp-imagemin, gulp-imagemin  —  для стиснення картинок
browser-sync — локальний сервер, який містить в собі live reload
bower-main, wiredep  — для підключення плагінів, що були встановлення з допомогою bower одразу у header.

Cтворимо JS об’єкт в який пропишемо всі потрібні нам шляхи, щоб при необхідності легко в одному місці їх редагувати:

var path = {
build: {
html: ‘build/’,
js: ‘build/js/’,
style: ‘build/css/’,
img: ‘build/images/’,
fonts: ‘build/fonts/’
},
src: {
html:{
file:’app/*.html’,
template:’app/templates’
},
js: ‘app/js/**/*.js’,
style:’app/scss/main.scss’,
img: ‘app/images/**/*.*’,
fonts: ‘app/fonts/**/*.*’
},
watch: {
html: ‘app/**/*.html’,
js: ‘app/js/**/*.js’,
style: ‘app/scss/**/*.scss’,
img: ‘app/images/**/*.*’,
fonts: ‘app/fonts/**/*.*’,
bower: ‘app/bower_components/**/*.*’
},
clean: ‘./build’,
};

 

Також створимо зміну, яка міститиме всі налаштування для локального серверу

var config = {
server: {
baseDir: “./”
},
tunnel: true,
host: ‘localhost’,
port: 9080,
logPrefix: “gulp-front-end”
};

Тепер проект буде доступним за адресою localhost:9080
Опишемо основну задачу Gulp, яка виконуватиме обробку усіх файлів і копіювання в результуючу папку build.

gulp.task(‘default’, [‘build’,’webserver’, ‘watch’]);

 

Все, що залишилось – це описати, як саме треба збирати наш проект.
Будь-яка із створених задач запускається з консолі за шаблоном
gulp task

Розглянемо задачу для роботи з html файлами:

gulp.task(‘html:build’, function () {
gulp.src(path.src.html.file) // тут вказується шлях до файлів
.pipe(fileinclude({ // ініціалізація плагіну для підключення файлів у один глобальний
prefix: ‘@@’,
basepath: path.src.html.template // шлях до папки що міститиме темплейти для підключення
}))
.pipe(wiredep({// підключення у вказане місце bower файлів
optional: ‘configuration’,
goes: ‘here’
}))
.pipe(gulp.dest(path.build.html)) // шлях куди будуть перенесені готові зібрані файли публічної версії
.pipe(reload({stream: true}));
});

 

З допомогою плагіна fileinclude, в index.html можна підключати темплейти цілих блоків всього однією командою @@include(‘_template.html’). У ньому також підтримуються змінні, тому один блок можна застосувати кілька раз з різним контентом.


@@include(‘./var.html’, {
“name”: “Quentin Tarantino”,
“email”: pulp_fiction@gmail.com
})

 

var.html




 
Мою робочу версію базового gulp проекту можна знайти тут.

Запустивши проект у себе командою gulp, отримаємо зібраний проект за адресою localhost:908/build

Це лише один з багатьох варіантів. Особливість Gulp в тому, що кожен може налаштувати будь-які задачі під себе.

В роботі з Gulp ми впритул підходимо до питання модульності. Це дуже важливо на великих проектах і в командній роботі. Таким чином, кожен розробник відповідатиме лише за свою маленьку частину роботи, що забезпечить високу продуктивність і швидкість роботи, зручний контроль над версіями, зменшення помилок і конфліктів, уникнення повторів, розподіл обов’язків у команді, швидку передача проекту іншому розробнику.

  • sania_net_ua

    Крута стаття!

  • Сергей Кузюк

    +1 Дійсно ціково описано.

Базовий gulp проект Prev. article
Фреймворки – добре чи погано ? Next article