Първи стъпки с 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 To A към проект

Gulp вече е инсталиран, но ще трябва да го добавим към всеки проект, от който се нуждаем, отделно. Създайте празна папка сега и се придвижете до нея във вашия терминал. Докато сте в папката за проекта, използвайте следната команда:

npm install --save-dev глътка

Това трябва да създаде папка node_modules и npm-debug.log във вашата папка на проекта. Те се използват от Gulp, за да направят нещо за вашия проект, не е нужно да мислите за тях на този етап.

Това е причината, поради която трябва да добавим Gulp към всеки конкретен проект всеки проект има различни изисквания. Човек може да се обади за SASS, друг за Less. Човек може да използва Coffeescript, а другият не може и т.н..

Gulpfile

Gulpfile е мястото, където се случва магията, където вие определяте необходимите ви автоматики и когато искаш да се случи. Нека създадем празна по подразбиране задача, като създадем файл с име gulpfile.js и вмъкване на следния код в него.

var gulp = require ("глътка"); gulp.task ('default', function () // Това не прави нищо за сега, скоро ще добавим функционалност);

След като този файл бъде записан, можете да се върнете към вашия терминал и да стартирате командата gulp самостоятелно. Gulp открива в кой проект е и изпълнява задачата по подразбиране - тази, която току-що създадохме. Трябва да видите нещо подобно:

Тук нищо не се случва, тъй като задачата е празна, но работи добре. Сега, нека да започнем с някои подходящи примери!

Копиране на файл

Това е скучно, ще призная толкова много, но ще ви помогне да разберете какво става лесно.

В папката на проекта създайте файл с име to_copy.txt , и име на папка Дев. Нека влезем в нашия Gulpfile и да създадем нова задача с име копие.

gulp.task ('copy', функция () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Първият ред определя задача, наречена копие. В него използваме gulp.src, за да определим кои файлове, които насочваме с тази задача - в този случай това е един файл с име to_copy.txt.

След това прехвърляме тези файлове към функцията gulp.dest, която определя къде искаме да поставим тези файлове - използвах dev директорията.

Върнете се до терминала и напишете копие на глътка за да изпълните тази задача, трябва да копира посочения файл в указаната директория, нещо подобно:

Командването на тръбата е в сърцето на Гълп. Това е ефективен начин за преместване на данни между команди. Командата src определя файловете, които се прехвърлят към командата dest. В по-сложни сценарии бихме пуснали файловете си в други команди, преди да определим дестинация.

Също така трябва да знаете, че източникът може да бъде даден като един файл или няколко файла. Ако имаме име на папка производство и искаме да преместим всички файлове от нашия развитие в нея, можем да използваме следната команда:

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

Знакът със звезда ще съответства на всичко в директорията. Можете също така да съпоставите всички файлове във всички поддиректории и да правите всякакви други фантастични съвпадения. Разгледайте документацията на node-glob за повече информация.

Компилиране на SASS

Компилирането на стилове от SASS файлове е често срещана задача за разработчиците. Може лесно да се направи с Gulp, но трябва да направим някаква подготовка. Освен основните команди като src, dest и много други, цялата функционалност се добавя чрез addons на трети страни. Ето как ги използвам.

Аз пиша SASS Gulp в Google, първият резултат обикновено е това, което ми трябва, трябва да намерите страницата за пакета SASS. Той ви показва как да го инсталирате (npm install gulp-sass). Вероятно ще трябва да използвате sudo, за да го инсталирате като администратор, така че вероятно ще бъде (sudo npm install gulp-sass) .

Веднъж направено, можете да използвате синтаксиса, който пакетът изисква да компилирате кода си. За да направите това, създайте файл с име styles.scss със следното съдържание:

$ primary: # ff9900; body фон: $ primary;

Сега създайте следната задача Gulp в Gulpfile.

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

Преди да стартирате командата, не забравяйте да "изисквате" пакета в горната част на Gulpfile така:

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 ("глътка"); 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 директорията.

Ако пишете глътка (заданието по подразбиране), вашето скриптове задачата ще се изпълни, последвана от вашата стилове задача.

Най- автоматизирайте глътка задача гледа няколко папки за промени в нашите scss и js файлове и ще изпълнява и двете задачи, които сме дефинирали, ако е открита промяна.

Преглед

Използването на Gulp не е трудно, всъщност много хора го предпочитат над Grunt заради по-простия синтаксис. Запомнете стъпките, които трябва да предприемете при създаването на нова автоматизация:

Търсене на плъгин
Инсталирайте приставката
Изисквайте приставка в Gulpfile
Използвайте синтаксиса в документацията

Петте команди, налични в Gulp (задача, run, watch, src, dest), са единствените, които трябва да знаете, всички добавки на трети страни имат голяма документация. Ето списък с някои неща, които използвам и които можете да започнете в момента:

Оптимизиране на изображенията с оптимизация на изображението
Създаване на графични спрайтове с gulp-sprite
Свързване на файлове с gulp-concat
Минимизиране на файловете с gulp-uglify
Изтриване на файлове с gulp-del
Javascript linting с gulp-jslint
JSON, който се преплита с gulp-jsonlint
Autoprefix CSS със система за премахване на преспи
Търсете и замествайте с помощта на gulp-frep
Намалете CSS с gulp-minify-css