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

В момента стажувам в технологична фирма и преди няколко дни получих предизвикателство от шефа си да напиша статия. Затова реших да напиша нещо на Gulp-sass.

Настройването му може да бъде разочароващо понякога, особено когато сте нов за него. Използвам Windows и търсенето на статия, която би решила проблема ми, беше като да накарам Jack in Black -ish да изписва „намаляване“.

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

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

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

Първо отворете командния ред и инсталирайте node.js на вашия компютър. Той се предлага с Node Package Manager (npm), който можете да използвате за инсталиране на Gulp. След инсталирането можете да инсталирате Gulp, като стартирате npm install gulp -g. На -gнарежда на НРП , за да инсталирате 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, сте готови да инсталирате първата задача. Трябва да requireотпиете. Създайте нов файл, наречен gulpfile.js във вашата директория на проекта - Можете да направите това, като използвате всеки текстов редактор. Започнете с добавяне на кода по-долу към вашия gulpfile.

‘use strict’;
var gulp = require(‘gulp’);

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

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

Поставете var sass = require(‘gulp-sass’);под реда, който ви е необходим за глътка.

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

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

Компилиране на sass / scss

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

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

//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });

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

Най- gulp.dest е изходът. Резултатът ще се съхранява в папката CSS в папката на приложението.

Gulp-watch-sass

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

//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});

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

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