Насправді, в будь-якому процесі розробки сайту ви зазвичай повинні створити певний набір файлів і папок, який відповідає бажаній структурі, що найбільше відповідає вашому проекту. У цьому випадку ви повинні дбати про стиснення і мінімізацію CSS і JavaScript, оптимізацію зображень і купу будь-яких штук, які необхідно враховувати при оптимізації сайту.
Додатково в процесі створення сайту відбувається багато повторюваних дій, таких як оновлення сторінок для перегляду змін, що вносяться. Все це насправді втомлива і марна трата часу. Уявіть, що у вас система, яка робить все це за вас. При зміні CSS-файлу створюється мінімізована версія і те саме відбувається з JavaScript-файлом. Подивіться, що ви можете автоматично робити за допомогою Gulp:
- мінімізувати CSS;
- мінімізувати JavaScript;
- стискати та оптимізувати зображення;
- компілювати файли Sass, CoffeeScript, Jade;
- автоматично перезавантажувати браузер, замість оновлення вручну через F5.
Що таке система складання ?
В основному , система складання являє собою набір виконуваних завдань (менеджери пакетів, препроцесори та інструменти складання), що застосовуються для автоматизації частих завдань у процесі розробки. Це означає, що вам не треба самостійно робити компіляцію, мінімізацію, оптимізацію, перевантаження, завантаження та ін. Все, що вам потрібно зробити — це написати невеликий код, який робитиме роботу за вас: такий код називається завданням. теками, на зразок jQuery, Backbone, AngularJS. Ви використовуватимете те, що називається менеджером пакетів, який бере турботу на себе. Менеджер пакетів може завантажити бібліотеку в папку проекту та за необхідності впровадити її у вихідний код. Здорово, чи не так!
З популярністю препроцесорів, таких як Sass, CoffeeScript, TypeScript, Jade, стає простіше отримати приховану силу з деяких рідних мов, на кшталт CSS. Таким чином, замість написання вихідного CSS можна використовувати Sass, щоб написати його більш ефективно. Після того як ви пишете CSS за допомогою Sass, ви повинні скомпілювати і перетворити його на звичайний CSS, щоб ваш браузер міг його зрозуміти. Так що цей процес також може трактуватися як автоматизоване завдання.
Отже, після того як ви написали або поки пишіть CSS з Sass, JavaScript за допомогою CoffeeScript або TypeScript, а HTML з Jade, ви визначаєте завдання, які будуть компілювати все це на рідну мову. Ви також напишіть завдання, які керуватимуть фронтенд-бібліотеками, як згадувалося вище. Але одних завдань недостатньо, нам потрібна система для запуску цих завдань, яка може сказати: «Добре, я маю роботу, давай її виконаємо».
Ось де з'являється інструмент запуску завдань. Нам добре відомо два такі інструменти: Grunt та Gulp.
У цьому посібнику ми будемо використовувати Gulp і для цього є причина. Ви повинні знати одну річ — Gulp не єдина доступна система збирання. Перед Gulp з'явився Grunt. Якийсь час Grunt був фаворитом, але з деяких причин люди сьогодні віддають перевагу Gulp.
Ось основні згадані причини, коли мова заходить про те, чому люди віддають перевагу Gulp, а не Grunt:
Grunt
- Занадто багатослівний.
- Високий поріг навчання.
- Багато налаштувань.
Gulp
Отже, я збираюся говорити про систему складання Gulp. У випадку, якщо ви хотіли б дізнатися більше про Grunt, можете піти сюди.
- Швидкий.
- Простий для навчання.
- Пріоритет коду над конфігурацією.
Отже, я можу визначити систему складання як комбінацію технологій, яка може автоматизувати деякі типові завдання в процесі розробки.