Как да настроите Gulp-sass с помощта на командния ред, ако сте начинаещ

Кредитен имидж

В момента стажарам в технологична фирма и преди няколко дни получих предизвикателство от шефа си относно написването на статия. Затова реших да напиша нещо на Gulp-sass.
Настройването му понякога може да бъде разочароващо, особено когато сте нови за него. Използвам Windows и търсенето на статия, която би решила проблема ми, беше като да накарам Джак в Блек-иш да пише „намалява“.

ОК, мисля, че малко се пренесох там ... достатъчно за мен, да започнем!

Послепис това е първата ми публикувана статия и се надявам да ви хареса. :)

Инсталиране на възел

Първо отворете командния ред и инсталирайте node.js на вашия компютър. Той се предлага с Node Package Manager (npm), който можете да използвате за инсталиране на Gulp. След инсталирането можете да инсталирате Gulp, като пуснете npm install gulp -g. -G инструктира npm да инсталира Gulp глобално на вашия компютър (това означава, че можете да използвате gulp команди навсякъде на вашия компютър.)

Преди да продължа, предполагам, че сте запознати с командния ред!

Отворете директорията на вашия проект и стартирайте npm init. Това ще създаде файл package.json, натиснете enter и той ще добави това, което ви трябва
файла package.json.

Да, може би се чудите какъв файл е package.json?
Файл package.json съдържа различни метаданни, свързани с вашия проект. Този файл дава информация на npm и му позволява да идентифицира проекта, както и да обработва зависимостите на проекта. Освен това улеснява инсталирането на всички задачи, които се използват в Gulp проект.

Ако все още не го разбирате, вероятно имате нужда от Даян да го обясни по-добре - какъв е проблемът / манията ми за Black-ish ??

След като стартирате npm-init, въведете npm install gulp --save-dev, това инструктира npm да инсталира Gulp във вашия проект. Използвайки --save-dev, ние съхраняваме Gulp като dev зависимост в package.json.

Създаване на Gulpfile

Сега, когато инсталирате Gulp, сте готови да инсталирате първата задача. Трябва да изисквате Gulp. Създайте нов файл, наречен gulpfile.js във вашата директория на проекти - Можете да направите това, като използвате всеки текстов редактор. Започнете с добавяне на кода по-долу във вашия gulpfile.

„Използвайте стриктно“;
var gulp = изисквам ('gulp');

Поставяне на задача

Сега можете да инсталирате gulp задача - в този случай ние бихме инсталирали Gulp-sass. Тази задача дава възможност за преобразуване на Sass в CSS. Все още използвайки командния ред, можете да инсталирате Gulp-sass, като пуснете npm install gulp-sass --save-dev. След това изискайте Gulp-sass във вашия gulpfile.js.

Поставете var sass = изисквате ('gulp-sass'); под линията, която искате gulp.

Структуриране на вашия проект

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

Съставяне на sass / scss

Последното нещо е да се инструктира gulp какви файлове трябва да конвертира и къде трябва да бъде местоназначението - къде ще се съхранява изходният файл.

Използвайте следното;

// съставят
 gulp.task ('sass', function () {
 gulp.src ( "приложение / SCSS / app.scss")
 .pipe (sass (). on ('грешка', sass.logError))
 .pipe (gulp.dest ( "приложение / CSS"));
 });

Файлът в gulp.src ще бъде преобразуван, можете също да изберете всички .scss файлове в директория, като използвате „app / scss / *. Scss“. Това ще избере всички ваши .scss файлове в папката scss.

Gulp.dest е изходът. Изходът ще се съхранява в папката CSS вътре в папката на приложението.

Gulp-часовник-дързък

Gulp има синтаксис за гледане, който му позволява да наблюдава изходните файлове и след това да „наблюдава“ за промени, направени във вашия код. Просто добавете синтаксиса във вашия gulpfile.js, като напишете:

// съставям и гледам
 gulp.task ('sass: гледай', функция () {
 gulp.watch ('app / scss / app.scss', ['sass']);
});

Това е почти всичко, което трябва да направите! Не беше ли стресиращо, или беше?

Благодаря за четенето!