Изучение такс-менеджера Gulp 4

5 уроков Консультации

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

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


JavaScript

Препроцессор 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();
}

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

gulp-js-sass.zip Необходима подписка!

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

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

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям!

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны при подписке от 1 месяца!


JavaScript

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