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

5 уроков
Консультации
#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

Далее необходимо прописать переменную и подключить в неё 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 месяца

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

Уроки Angular для начинающих
7 уроков
Изучение библиотек jQuery
24 урока
Уроки Vue.js для начинающих
10 уроков
Уроки Node JS и Express для начинающих
17 уроков
Создание приложения на React JS / Использование API
7 уроков
Изучение JavaScript от нуля до гуру
21 урок