Таск-менеджер Gulp

#2 - Gulp и SASS. Установка и работа

#2 - Gulp и SASS. Установка и работа

Препроцессор SASS позволяет прописывать CSS стили быстрее, используя переменные, циклы, условия, функции и многое другое. Но есть и проблема, код SASS необходимо конвертировать в CSS через консоль. Gulp позволяет оптимизировать процесс и выполняет все автоматически. В ходе урока вы научитесь это делать.

Відеоурок

Telegram group

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

Полезная ссылка:


Gulp позволяет оптимизировать множество рутинных задач и одна из таких задач - конвертация кода из SASS в CSS. Для автоматической конвертации данных необходимо построить функцию (задачу), прописать все настройки и далее выполнить команду в терминале, которая преобразует ваш SASS код в CSS.


Для работы с SASS предварительно необходимо установить плагин gulp-sass.

npm install --save-dev gulp-sass

Далее необходимо прописать переменную и подключить в неё библиотеку.

var sass = require('gulp-sass')

Теперь чтобы преобразовать данные из SASS в CSS необходимо прописать команду sass() внутри задачи:

function sassToCSS(done) {
	gulp.src('./scss/style.scss')
		.pipe(sass({
			errorLogToConsole: true,
			outputStyle: 'compressed'
		}))
		.on('error', console.error.bind(console))
		.pipe(rename({suffix: '.min'}))
		.pipe( gulp.dest('./css/') );
	done();
}

Матеріали для курсу

Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт

Вихідний код

Весь код буде доступний після підписки на проект!

Онлайн редактор коду

Завантаження...

Завдання до уроку

Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися

Вивчення JavaScript для початківців з нуля!
15 уроків
Создание приложения на React JS / Использование API
7 уроків
Three.js с нуля: Разработка сайта с 3Д Графикой
10 уроків
Уроки Vue.js для начинающих
10 уроків
Фреймворк Next JS / Изучение NextJS для начинающих
8 уроків
MERN Stack / Разработка веб-приложения
9 уроків
Коментарі
Додати коментар

Поки що коментарів немає