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

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

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

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

Видеоурок

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


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 месяца

Также стоит посмотреть

Практика React JS / Разработка магазина (eCommerce)
9 уроков
Создание динамического веб сайта
22 урока
Создание приложения на React JS / Использование API
7 уроков
Уроки Vue.js для начинающих
10 уроков
Уроки React Native для начинающих / Разработка приложения с нуля
11 уроков
Уроки Node JS и Express для начинающих
13 уроков
Комментарии
Добавить комментарий

Пока комментариев нет