Початок роботи з Gulp.js

Gulp - це інструмент на основі Javascript, який дозволяє автоматизувати біти вашого робочого процесу. Автоматизація може буквально заощадити годинник на добу. Незалежно від того, чи є ви розробником чи дизайнером, який з часом створює текстові файли HTML, я заохочую вас.

У цій статті ми розглянемо основи використання Gulp - від встановлення до базового синтаксису і декількох прикладів. До кінця статті ви повинні бути в змозі знайдіть, встановіть і використовуйте пакунки, створені іншими для Gulp компілювати SASS, оптимізувати зображення, створювати спрайти, об'єднувати файли тощо!

Встановлення Gulp

Не хвилюйтеся, установка дуже проста. Потрібно буде використовувати термінал в OSX і Linux, або командний рядок для Windows. Відтепер я буду говорити про нього як про термінал.

Відкрийте його та введіть npm -v і натисніть enter. Якщо ви бачите відображений номер версії, у вас вже встановлений Node - це залежність для Gulp.

Якщо ви отримаєте “не знайдено” (або подібну помилку), перейдіть на сторінку завантажень Node.js і виберіть відповідний пакет для вашої системи. Після встановлення команда npm буде доступна в терміналі.

Встановлення Gulp так само легко. Вставте наступну команду в термінал:

npm install --global gulp

Це дозволить встановити команду Gulp, яка буде доступна глобально у вашій системі.

Додавання ковтка до проекту

Gulp тепер встановлено, але нам потрібно окремо додати його до кожного потрібного нам проекту. Тепер створіть пусту папку і перейдіть до неї у вашому терміналі. Перебуваючи в папці проекту, виконайте таку команду:

npm install --save-dev gulp

Це має створити папку node_modules і файл npm-debug.log у папці проекту. Вони використовуються Gulp, щоб зробити свою справу для вашого проекту, вам не потрібно думати про них на цьому етапі.

Причина, по якій нам потрібно додати Gulp до кожного конкретного проекту, це те кожен проект має різні вимоги. Можна закликати до SASS, інший для Less. Можна використовувати Coffeescript, інший не може, і так далі.

Gulpfile

Gulpfile - це місце, де відбувається магія, де ви визначаєте потрібні вам автоматизації і коли ви хочете, щоб вони відбувалися. Створимо порожнє завдання за замовчуванням, створивши файл з ім'ям gulpfile.js і вставте в нього наступний код.

var gulp = require ('gulp'); gulp.task ('default', function () // Це нічого не робить, ми скоро додамо функціональність);

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

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

Копіювання файлу

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

У папці проекту створіть файл з ім'ям to_copy.txt , і папку з ім'ям dev. Давайте підемо в наш Gulpfile і створимо нове ім'я копіювати.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Перший рядок визначає завдання, яке називається копією. У цьому розділі ми використовуємо gulp.src, щоб вказати, які файли ми націлюємо на це завдання - у цьому випадку це єдиний файл з ім'ям to_copy.txt.

Потім ці файли передаються в функцію gulp.dest, яка вказує, де ми хочемо розмістити ці файли - я використовував каталог dev..

Поверніться до свого терміналу і введіть тип копія ковтка для запуску цього завдання слід скопіювати вказаний файл у вказаний каталог:

Команда труби знаходиться в центрі Gulp. Це ефективний спосіб переміщення даних між командами. Команда src визначає файли, які передаються до команди dest. У більш складних сценаріях перед тим, як вказати пункт призначення, наші файли буде передано іншим командам.

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

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Символ зірки буде відповідати всім, що є в каталозі. Ви також можете зіставити всі файли в усіх підкаталогах і виконувати всілякі інші фантастичні відповідності. Ознайомтеся з документацією на node-glob.

Компіляція SASS

Компіляція таблиці стилів з файлів SASS є звичайним завданням для розробників. Це може бути зроблено з Gulp досить легко, ми будемо потребувати зробити деяку підготовку хоч. Крім основних команд, таких як src, dest і ряд інших, вся функціональність додається через доповнення третьої сторони. Ось як я їх використовую.

Я набираю SASS Глоток в Google, перший результат, як правило, те, що мені потрібно, ви повинні знайти сторінку для пакета SASS. Він показує, як його встановити (npm install gulp-sass). Можливо, вам доведеться використовувати sudo, щоб встановити його як адміністратора, так що, ймовірно, буде (sudo npm install gulp-sass) .

Після цього ви можете використовувати синтаксис, який диктує пакет, щоб скомпілювати код. Для цього створіть файл styles.scss з таким вмістом:

$ primary: # ff9900; тіло background: $ primary; 

Тепер створіть наступне завдання Gulp у Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')));

Перш ніж запускати команду, не забудьте "вимагати" пакунок у верхній частині файлу Gulp, наприклад:

var sass = require ('gulp-sass');

Коли ви працюєте глоток сас, всі файли з розширенням scss буде передано до функції sass, яка перетворить їх у css. Потім вони надсилаються до функції призначення, яка розміщує їх у папці css.

Перегляд файлів і папок

Поки що це все зручно, але нам все одно потрібно ввести команду щоразу ми хочемо виконати завдання, яке не дуже ефективне, особливо коли йдеться про зміни стилів. Gulp дозволяє дивитися файли для змін і запускати команди автоматично.

У файлі Gulpfile створіть команду з іменем автоматизувати який буде використовувати команду watch для перегляду набору файлів для змін, і запустити певну команду, коли файл змінюється.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Якщо ви вводите автоматизувати ковтка в термінал, він почне і закінчить завдання, але він не повернеться до запиту, оскільки він контролює зміни. Ми вказали, що ми хочемо дивитися всі файли scss в кореневому каталозі, і якщо вони змінюються, ми хочемо запустити команду sass, яку ми створили раніше.

Якщо ви зараз зміните файл style.scss, його слід скомпілювати у файл css у каталозі css автоматично.

Запуск декількох завдань

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

Якщо завдання пов'язані, мені подобається зв'язати їх. Хорошим прикладом може бути конкатенація та мінімізація файлів javascript. Спочатку прокачуємо файли до дії concat, а потім переписуємо їх до gulp-uglify, а потім використовуємо функцію призначення, щоб вивести їх.

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

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / * .js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'))); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Якщо ви вводите скриптів ковтка в термінал, всі файли javascript в каталозі js будуть об'єднані, виведені в головний каталог, потім углифіковані і збережені в основний каталог.

Якщо ви вводите глоток сас, всі ваші scss-файли будуть зібрані і збережені в каталозі css.

Якщо ви вводите ковтати (завдання за замовчуванням), ваше сценарії буде запущено завдання, за яким слідуватиме ваше стилів завдання.

The автоматизувати ковтка завдання переглядає кілька папок для змін у файлах scss і js і виконує обидва завдання, визначені нами, якщо виявлено зміну.

Огляд

Використання Gulp не складно, насправді, багато людей воліють його над Grunt через його простіший синтаксис. Пам'ятайте про кроки, які необхідно виконати під час створення нової автоматизації:

• Шукати плагін
• Встановити плагін
• Потрібно встановити плагін у Gulpfile
• Використовуйте синтаксис у документації

П'ять команд, доступних у Gulp (завдання, run, watch, src, dest), єдині, які потрібно знати, всі аддони третьої сторони мають велику документацію. Нижче наведено список деяких речей, які я використовую, з яких ви могли б почати зараз:

• Оптимізація зображень з оптимізацією gulp-image
• Створення спрайтів зображення з ковтком-спрайтом
• Об'єднання файлів з gulp-concat
• Мінімізація файлів за допомогою gulp-uglify
• Видалення файлів з gulp-del
• Javascript linting з gulp-jslint
• JSON linting з gulp-jsonlint
• Autoprefix CSS з gulp-autoprefixer
• Шукати і замінювати за допомогою gulp-frep
• Змініть CSS за допомогою gulp-minify-css