[LoftSchool] - Gulp.js
Gulp.js - потоковый сборщик проектов на JS.
Goal Accomplishment Criteria
Материал изучен
-
Gulp.js #1 - работаем с CSS: concat, minify, rename, notify, watch, dest
В данном уроке мы рассмотрим подключение и настройку gulp, а также работу с плагинами: concat, minify, rename, notify. Разберемся с watch и dest.
-
Gulp.js #2 - autoprefixer, livereload, gulp-connect
В данном уроке мы рассмотрим автоматическое добавление префиксов для любых версий браузеров при помощи плагина gulp-autoprefixer и быстрый запуск локального сервера в связке с livereload.
-
Gulp.js #3 - gulp-sass, gulp-uncss
Заключительный урок по работе с таблицами стилей: разберемся с SASS препроцессором и плагином UNCSS. Последний вызывает особенный интерес: позволяет удалять неиспользуемые стили в автоматическом режиме. Как насчет того, чтобы заставить "похудеть" bootstrap в 20 раз?
-
Gulp.js #4 - Боремся с кэшированием или ревизии подключаемых файлов.
При обычном подключении различных файлов, таких как стили, скрипты, изображения и т.д. они могут закэшироваться браузером/сервером и произведенные в них изменения останутся незамеченными и страничка сайта останется в браузере без изменений. В данном видео показана работа gulp-плагинов, для борьбы с подобным поведением путем добавления хэшей к названиям подключаемых файлов.
-
Gulp.js #05 - структура проекта, wiredep, bower
Структура и сборка веб приложения - часть 1. Рассматриваем корректную работу с bower.
-
Gulp.js #06 - сборка и деплой проекта, gulp-useref, gulp-sftp
Автоматическая сборка проекта в папку dist и отправка файлов на продакшен. Посмотрим, как работает gulp-useref, gulp-sftp, gulp -clean, gulp-if. Пожалуй, самое приятное в данном стеке - это отсутствие необходимости вручную переписывать путь к файлам CSS и JS, чем грешат многие юные фронтенд оптимизаторы.
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
