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

Няма да обяснявам какво е глътка, тъй като вече сте тук.

Сигурен съм, че всичко, което искате да знаете, е как да използвате gulp.

Първо, ще ни трябват няколко неща, за да започнем да използваме gulp в нашия проект.

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

npm i gulp gulp-cssnano gulp-sass gulp-concat-css -D

Това ще инсталира:

  • Gulp: Инструментариум за автоматизиране на задачи
  • Gulp-cssnano: плъгин за минимизиране на вашия CSS
  • Gulp-sass: плъгин за трансформиране на вашите sass файлове в CSS
  • Gulp-concat-css: плъгин за свързване на множество CSS файлове в един.

След това ще трябва да създадете файл Gulpfile.js в основата на вашия проект.

След това импортирайте gulp и добавките, които сме инсталирали преди това, за да можем да ги използваме.

const gulp = require(‘gulp’);
const concatCss = require(‘gulp-concat-css’);
const cssNano = require(‘gulp-cssnano’)
const sass = require(‘gulp-sass’);

А сега нека създадем нашата първа задача, която ще трансформира всички наши sass файлове в един единствен CSS файл.

Ето кода!

gulp.task('sass', function sassFunc(){
  return gulp.src('./sass/*.scss')
  .pipe(sass())
  .pipe(concatCss('styles.css'))
  .pipe(gulp.dest('./css'))
});

Уау, човече! Не просто хвърляйте неща по мен и го обясних първи.

Знам… Знам… Стигам дотам.

Първото нещо, което ще видим е gulp.task, което е функция, която получава два аргумента.

  1. Низ, който ще бъде името на задачата.
  2. Функция, при която ще изпълнявате поставената задача.

След това използваме gulp.src, който получава низ от местоположението, където ще извличаме нашите sass файлове.

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

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

Така че първия път, когато използваме функцията pipe, ние й подаваме плъгина sass(), за да може да трансформира всички наши файлове в CSS файлове.

Вторият път, когато използваме функцията pipe, използваме приставката concatCss.

Което ще съхранява всички наши нови трансформирани CSS файлове в един единствен файл, styles.css.

И накрая, използваме тръба за последен път, за да съхраним нашия новосъздаден CSS файл с функцията gulp.dest, която получава низ от местоположението, където ще съхраняваме файла.

Забележка: След като приключим с изпълнението на всичко, трябва да го върнем. Това позволява на gulp да разбере, че задачата е изпълнена.

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

Ето кода за задачата за минимизиране.

gulp.task('minify', function minifyFunc() {
  return gulp.src('./css/styles.css')
    .pipe(cssnano())
    .pipe(gulp.dest('./css'));
});

Няма да обяснявам какво прави всяка функция, тъй като съм го обяснявал преди. Но аз на свой ред ще обясня какво прави този код.

Първо, създава задача с име minify, която търси файл styles.css в папката CSS, която се намира в главната папка на проекта.

След това минимизира файла с помощта на плъгина cssnano

И накрая, той го съхранява отново в папката CSS със същото име.

Последното нещо, което трябва да направим, е да следим за всякакви промени в нашите sass файлове, за да могат да бъдат конвертирани в CSS и след това да го минимизираме.

Така че… нека го направим!

gulp.task('watch', function watchFunc() {
  gulp.watch('./sass/*.scss', gulp.series('sass', 'minify'));
});

Тук добавихме някои нови функции към микса, гледането и сериала. Така че нека първо ги обясня.

gulp.watch е функция, която получава два аргумента.

  1. Низ с местоположението на файловете, които трябва да се гледат.
  2. Поредица от задачи, които трябва да бъдат изпълнени, когато настъпи промяната

gulp.series е функция, която получава произволен брой низове от предварително регистрирани задачи

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

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

Той следи за всякакви модификации в нашите scss файлове в папката sass.

Ако открие някакви промени, изпълнява задачите по ред, първо sass, след това минимизира.

Тъй като приключихме с писането на всичко, уверете се, че сте запазили кода си и добавете този скрипт във вашия package.json

gulp watch

Надявам се обяснението ми да ви е харесало.

Ще се видим!