глътка. Част 3. Инсталирайте и използвайте добавки
Как изобщо работи Gulp?
В края на втората част наКак да инсталираме Gulp, се спряхме на факта, че той ругаеше липсата наgulpfile. Това е "сърцето" на Gulp. Без този файл той няма да може да направи абсолютно нищо, т.к. Той дори не знае какво искат от него.
Тук сте създали задача по подразбиране. Този, който ще бъде извикан, когато Gulp стартира без изрично указване на задача. В този пример той просто копира файлове от една директория в друга, без да променя нищо.
Компилиране на LESS
Не обичам да разглеждам нереалистични задачи. Нека предизвикаме себе си за този урок дакомпилираме LESS в CSS с помощта на Gulp.
За задачи, малко по-трудни от преместването на файлове, "чистият" Gulp няма да работи. Трябва да използвате плъгини за него. За щастие има много от тях и вече е написан готов плъгин за всяка ваша задача. В нашия случай ще използваме плъгинаgulp-less.
Инсталирането на плъгин не се различава от инсталирането на самия Gulp. Същият npm:
Сега нека модифицираме нашия gulpfile.js, за да научим Gulp как да компилира LESS.
Труден? Не мисли. Всичко, което направихме, е да получим самия обект на приставката и да добавим неговото извикване към задачата. Сега опитайте да създадете по-малко папка в проекта с файловете вътре и стартирайте gulp от командния ред. LESS ще се компилира в CSS.
Използване на package.json за лесна инсталация
Съгласете се, не е много удобно ръчно да инсталирате всички модули от проект на проект всеки път. Нека ви напомня, че глобалната инсталация няма да работи на Windows.
Node.js, а именно неговият мениджър на пакети NPM, има способността да използва един файл, за да опише зависимостите на проекта (нещо като composer.json за PHP разработчици). Защо не използвате тази функция за лесно инсталиране на нашите добавки?
Ето един примерфайл за нашата конфигурация. Тук съм посочил точните версии на gulp и gulp-less. Това е така, защото самият npm ги замени с последната актуализация. Вашите версии може да се различават, ако желаете. Сега, когато стартиратеnpm install без опции, пакетите, описани в този файл, ще бъдат инсталирани. Удобно, нали?
Въпрос към читателите
Какви функции на Gulp да опишем в близко бъдеще? Има няколко опции: Създаване на спрайтове, генериране на Sourcemaps, "наблюдаване" за промени, оптимизиране на изображението.