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

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

#3 - Autoprefixer и Source Maps

#3 - Autoprefixer и Source Maps


JavaScript

Некоторые CSS3 свойства некорректно отображаются в различных браузерах. Чтобы это исправить придумали специальные префиксы для свойств. Gulp обладает плагином Autoprefixer, позволяющий не прописывать префиксы к свойствам каждый раз вручную. В уроке вы изучите плагин Autoprefixer, а также познакомитесь с Source Mapping.

Видео урок:

Некоторые CSS3 свойства, например transition, могут некорректно отображаться в менее популярных браузерах. Для исправления ошибки были придуманы специальные префиксы к свойствам. 

Пример:

a {
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

Прописывать префиксы под каждое CSS3 свойство очень неудобно и это занимает множество времени.


Для решения проблемы придумали плагин Autoprefixer. Подключив плагин и указав какие CSS или SCSS файлы вы отслеживаете, вы сможете автоматически добавлять все необходимые префиксы к свойствам и ваш сайт будет выглядеть верно на любом устройстве.

Source Maps

Source Maps это плагин, позволяющий указать исходный файл со стилями. Указав такой файл, вам намного проще будет отслеживать ошибки и проверять код через консоль разработчика в Google Chrome, Mozilla Firefox и в любых других веб браузерах.

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

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

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

Исходный код

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

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

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

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

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


JavaScript

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