Как очистить кэш gulp
От автора: Gulp – инструментарий, облегчающий жизнь веб-разработчика, с его помощью можно задавать различные задачи. Часто используется для таких front-end задач как: поднятие сервера, автоматическое обновление страницы браузера в любой момент сохранения файла, использование препроцессоров как Sass или LESS, оптимизация CSS, JavaScript и изображений.
Это далеко не полный список возможностей Gulp. Если постараться, то можно даже создать генератор статических сайтов (я делал!). Так что да, Gulp это очень мощный инструмент. Однако, если вы хотите в нем разобраться, придется потратить время на изучение Gulp.
Именно для этого и написана данная статья. В статье так хорошо расписаны основы, что после нее вы сможете уже сами продолжить изучать этот таск раннер. Прежде чем мы перейдем к подробностям, поговорим о том, почему вы предпочтете Gulp другим схожим инструментам.
Почему Gulp?
Приложения на подобие Gulp относятся к так называемым «таск раннерам», так как они используются для запуска задач по сайтостроению. Два саммых популярных менеджера задач на сегодня это Gulp и Grunt. Но кроме названных, конечно, существуют и другие. Broccoli больше используется для компиляции ресурсов, одна из наиболее распространенных задач в таск раннерах.
Существует уже масса статей по поводу различий между Grunt и Gulp, и почему одно приложение стоит использовать, а другое нет. Brunch по типу задач тоже очень похожа на описанные выше программы, также выполняет такие задачи связанные с сервером или проверкой файлов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Все отличие в том, как вы организуете рабочий процесс в этих программах. Если сравнивать с Grunt, то Gulp намного быстрее и проще настроить, плюс он еще и запускается быстрее. А теперь давайте, собственно, разберемся, как начать работу с Gulp.
Что необходимо настроить
К концу это статьи у вас будет настроенная программа, которая будет способна выполнять описанные в начале статьи задачи:
Компиляция Sass в CSS
Обновление браузера при любом сохранении файлов
Оптимизация всех ресурсов (CSS, JS, шрифты и изображения)
Также вы узнаете, как связать две разные задачи набором простых команд. Начнем с установки Gulp на ваш компьютер.
На прошлой неделе я обсуждал, как настроить Node.js и Gulp в Visual Studio 2015 . Во время этого обсуждения я упомянул, что я использую Gulp для объединения, минимизации и кеширования моих файлов HTML, CSS и JavaScript.
На этой неделе я собираюсь рассказать вам, как именно я это делаю.
Итак, если у вас еще не установлены Node.js и Gulp, вы можете вернуться и прочитать статью, которую я написал на прошлой неделе.
Пакетирование
Первое, что мы хотим сделать, это объединить все наши файлы CSS и файлы JavaScript в один файл для CSS и один файл для JavaScript. Есть несколько способов, которыми вы могли бы сделать это, но я хотел, чтобы был какой-то способ, который позволил бы мне работать без привязки во время разработки и связываться, когда я выпускал код. Поскольку я работаю с одностраничным приложением (SPA), это было простой задачей: настроить файл по умолчанию на index.debug.html для разработки и index.release.html и использовать преобразования web.config, чтобы указать, какие из них должны быть используется в какой среде. Если вы работаете в какой-то другой среде, я уверен, что у вас есть какой-то аналогичный способ указания файла по умолчанию на основе настроек среды.
Итак, вся моя работа по разработке будет выполнена в index.debug.html.
Как я уже сказал, существует много способов объединения JavaScript и CSS-кода, но я обнаружил, что, как мне кажется, требуется наименьшее количество работы, это использование модуля gulp-useref . Этот модуль позволяет нам помещать токены в наш HTML-файл, которые указывают, какие файлы мы хотим сжать и каким должно быть полученное имя файла.
Ваш HTML-файл будет выглядеть примерно так:
Useref видит токен сборки и создает файл CSS с именем комбинированный.css и файл JavaScript с именем комбинированный.js и изменяет выходной HTML-код так, чтобы он выглядел следующим образом:
Чтобы использовать эту функцию в своем файле Gulp, установите его с помощью NPM:
Убедитесь, что вы запускаете NPM в каталоге, в котором находится файл gulpfile.js.
В своем файле Gulp вы добавите следующий код:
Конечным результатом является то, что в подкаталоге с именем index появится новый файл index.debug.html вместе с новыми файлами css / комбинированный.css и scripts / комбинированный.js.
Условная обработка
Одна из многих вещей, которые мне нравятся в Gulp, это то, что он основан на потоке. То есть мне не нужно записывать файлы в каталог до тех пор, пока я не захочу — в отличие от Grunt (другого популярного инструмента для обработки файлов Node.js), где все целиком основано на файлах.
Однако, поскольку у меня есть три разных типа файлов, полученных в предыдущем процессе, и я хочу сжать каждый из файлов, мне потребуется какой-то способ условной обработки файлов, выходящих из useref.
Для этого нам нужен gulp-if .
Вы можете установить gulp-if, используя NPM, используя следующую команду:
Основное использование gulp-if выглядит следующим образом:
gulpif (/ * условие файла здесь * /,
/ * следующий процесс потока идет сюда * /);
Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.
Основные ресурсы урока:
Установка Gulp
Обратите внимание, что при установке Node.js необходимо отметить галочками установку npm и добавление программы в Path:
После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (Командная строка в Windows) и выполните следующую команду:
Для пользователей Mac и Linux, возможно, придется выполнять команды с правами суперпользователя, sudo.
Из данной команды мы видим, что запускается менеджер пакетов npm (Node Package Manager), который командой install устанавливает Gulp в систему. Ключ -g говорит о том, что пакет установится в систему глобально, то-есть в систему, а не в папку проекта. Без ключа -g пакет устанавливаются в ту папку, в которой выполняются текущие команды, поэтому будьте внимательны.
Создание проекта Gulp
Давайте создадим папку проекта для примера, с которой будем работать, пусть это будет, например, папка myproject.
Очень важно! Не создавайте русскоязычные папки проектов и следите за тем, чтобы путь до папки проекта не содержал кириллических символов, то-есть не был написан на русском языке. В противном случае, у вас могут возникнуть проблемы при работе различных утилит Gulp. Папка вашего пользователя также не должна быть русскоязычной. Всё только латинскими буквами.
Далее выполним инициализацию проекта в той папке, которую создали:
Следуя инструкциям, заполним метаинформацию о нашем проекте:
В результате такой несложной первоначальной настройки нашего нового Gulp проекта в папке myproject нарисуется новый файл package.json.
Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте.
Давайте установим в наш проект Gulp:
Что мы видим из данной строки: npm устанавливает пакет gulp в текущую папку myproject (потому, что нет ключа -g, устанавливающий пакет глобально в систему) и сохраняет название пакета с версией в файл package.json:
Кроме того, у нас появляется папка node_modules, которая теперь содержит установленный пакет gulp и необходимые зависимости. В данную папку автоматически будут сваливаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, что мы установили не так уж и много пакетов. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ни чего чистить и удалять из папки node_modules не нужно.
Общепринятая структура каталогов в проектах
Работая с различными плагинами, программами и скриптами, будь то jQuery плагин, модуль для CMS, веб-проект или какое-то другое ПО, вы наверняка замечали, что у всех проектов есть общая структура каталогов, например, большинство проектов имеет папку dist и app. Давайте создадим первоначальную структуру нашего учебного проекта по всем правилам хорошего тона веб-разработки. В результате мы должны создать следующую структуру в нашем проекте myproject (все файлы, которых не было, пока создаем пустыми):
Данная структура встречается довольно часто, практически во всех проектах, но это не аксиома и некоторые проекты могут иметь вообще другую структуру. Для данной статьи мы будем использовать именно такую структуру проекта.
Папка dist/ будет содержать уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.
gulpfile.js
Теперь давайте откроем в редакторе кода gulpfile.js и напишем в него:
Данной строчкой мы подключаем Gulp к нашему проекту, посредством функции require. Данная функция подключает пакеты из папки node_modules в наш проект, присваивая их переменной. В данном случае, мы создаем переменную gulp.
Далее мы уже можем работать с этой переменной и создавать таски (инструкции).
gulpfile.js:
Результат выполнения команды gulp mytask:
Это, конечно очень простой базовый пример создания таска. Как правило, таски несколько сложнее и включают некоторые дополнительные команды:
Это база Gulp, теперь можно создавать инструкции. Для начала давайте создадим обработчик, который будет компилировать Sass файлы в CSS (CSS препроцессинг).
Gulp Sass
Давайте установим пакет gulp-sass в наш проект с сохранением версии и названия в package.json.
Обратите внимание, что любые Gulp пакеты, для любых задач, легко гуглятся и имеют вполне исчерпывающие инструкции по подключению на своих хоумпейджах и в документации.
Далее подключим gulp-sass в файле gulpfile.js. Обратите внимание, что переменные для подключения пакетов можно перечислять через запятую:
gulpfile.js:
После этого, логичным будет выполнить в терминале наш новый таск sass:
В результате выполения данной команды в папке app/css появится файл main.css.
От таки чудеса, друзя. Как видим, все просто 🙂
Выборка файлов для gulp.src
В принципе, мы рассмотрели все, что необходимо знать о Gulp, теперь будем углубляться в каждую деталь того, что было изложено выше.
Самые распространенные шаблоны выборки
Давайте внесем некоторые изменения в таск sass и сделаем его более универсальным:
Дело в том, что брать напрямую один отдельный файл не всегда удобно, так как в папке sass могут появиться и другие файлы с расширением sass, которые могут использоваться в проекте.
Обратите внимание, что файлы sass, которые предназначены для импорта в другие файлы, как части одного общего, начинаются с нижнего подчеркивания _part-1.sass. Такие файлы не учавствуют в компиляции, как отдельные файлы, а добавляются через @import в основные файлы.
Наблюдение за изменениями в файлах (Gulp Watch)
Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:
Если мы, например, хотим наблюдать за всеми изменениями в файлах sass нашего проекта, то можем использовать следующую конструкцию:
Что мы видим: Gulp наблюдает за всеми sass файлами и при сохранении выполняет таск sass, который автоматически компилирует их в css файлы.
Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами
Если мы запустим в консоли gulp watch, то Gulp будет автоматически следить за всеми измененями в файлах sass при сохранении и компилировать их в css.
Было бы неплохо в дополнение к этой красоте сделать автоматическую перезагрузку страницы при изменениях в файлах. Для этой задачи нам подойдет Browser Sync.
Автоматическое обновление страниц с использованием Bbrowser Sync
Мы уже умеем устанавливать дополнения для Gulp, поэтому давайте установим Browser Sync в наш проект:
И, конечно-же, подключим в файле gulpfile.js, как мы это делали ранее с пакетом gulp-sass.
Создаем таск для Browser Sync:
Отлично! Наш сервер для работы и автоматического релоада готов. Теперь давайте последим за изменениями в Sass. Если файл Sass обновляется, автоматически инжектим в HTML измененный CSS файл:
Расположим таск watch после всех других тасков и в результате получим такой gulpfile.js:
Для того, чтобы следить за изменениями в браузере, сделаем соответствующую разметку в файле index.html директории app с подключением файла стилей main.css:
Давайте разберемся, что у нас происходит в консоли:
И эта задача нам по плечу:
Здесь мы используем функцию browserSync.reload, которую нам любезно предоставил пакет Browser Sync. Обратите внимание на выборку файлов для слежения.
В принципе, мы уже имеем довольно продвинутое рабочее окружение. Но двигаемся дальше, это не все, на что способен Gulp.
Оптимизация JavaScript
Давайте рассмотрим, как можно оптимизировать JS файлы проекта. Чаще всего, в оптимизации нуждаются библиотеки и сторонние jQuery и JavaScript плагины. Давайте создадим в папке app паку libs, которая будет содержать необходимые проекту библиотеки. Все библиотеки будем размещать в отдельных папках. Для установки новых библиотек я советую использовать Bower.
Обратите внимание, что для работы Bower необходим установленный Git.
Теперь в папке проекта создадим файл .bowerrc, в который напишем:
Если вы пользователь ОС Windows, у вас не получится создать файл, начинающийся с точки. Воспользуйтесь FileZilla или каким-нибудь файловым менеджером для этой задачи.
Данной настройкой мы указываем путь по умолчанию для установки плагинов с помощью Bower.
Установим jQuery и Magnific Popup, для примера:
- code
- source
- bower i jquery magnific-popup
Обратите внимание, что все (ну, или почти все) плагины имеют папку dist, об этом мы говорили ранее. В этой папке располагаются готовые файлы продакшена, которые мы и будем использовать в нашем проекте.
Давайте создадим таск scripts, который будет собирать все JS файлы библиотек в один и минифицировать файл. Для этого установим 2 пакета: gulp-concat и gulp-uglifyjs.
Подключим новые библиотеки в gulpfile.js:
Создаем задачу для сборки и сжатия всех библиотек (перед watch):
Давайте проверим, как работает наш новый таск scripts, выполнив в терминале:
Выполнение таска scripts можно запустить перед выполнением watch:
Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css
На выходе, в папке app/css мы получаем дополнительно к main.css файл libs.css, который содержит стили всех библиотек. Файл main.css нет особого смысла минифицировать, так как он содержит кастомные (пользовательские) стили. А вот файл libs.css мы с удовольствием минифицируем.
Для минификации CSS установим пакеты gulp-cssnano и gulp-rename:
И подключим их в нашем gulpfile.js:
И создадим соответствующий таск css-libs. Сразу добавим данный таск в watch для того, чтобы библиотеки собирались в процессе запуска проекта. Таск sass лучше вызвать до запуска css-libs, чтобы нам было что минифицировать:
Подготовка к продакшену
Для продакшена (сборки в папку dist) мы создадим отдельный таск build в конце gulpfile.js. В данной инструкции мы осуществим сборку Sass, JS и выгрузку того, что у нас готово в папку dist.
Здесь, присваивая переменным какие-либо действия, мы их выполняем. Таким образом можно выполнять мультизадачные таски. Можно и не присваивать, но мы сделаем так, ибо красивше.
Установим и подключим пакет del:
Создаем таск очистки clean и добавляем его выполнение перед выполнение build:
Оптимизация изображений
Как вы могли заметить, в нашем проекте на продакшене не хватает изображений. Давайте исправим это недоразумение и добавим обработку изображений в наш проект.
В папке app/img есть 3 изображения, которые нам необходимо перенести в папку продакшена, оптимизируя.
Для оптимизации изображений установим 2 пакета (gulp-imagemin, imagemin-pngquant) и подключим их:
Далее создадим таск img для сжатия изображений на продакшен и вызовем его после очистки:
Все прекрасно. До тех пор, пока количество изображений в проекте не превышает 3 шт. Большое количество картинок будет обрабатываться значительно дольше, поэтому к обработке изображений было бы неплохо добавить кеш, чтобы картинки кешировались, экономя наше время.
Установи м подключим gulp-cache:
Модифицируем таск img:
Автоматическое создание префиксов CSS с помощью Gulp
Вендорные префиксы необходимы для обеспечения максимальной совместимости со всеми современными браузерами. Было бы логично сделать автоматическое добавление префиксов, чтобы написав в CSS или Sass:
Мы получили на выходе:
- code
- source
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
Установим пакет gulp-autoprefixer и подключим его в gulpfile.js:
И модифицируем наш таск sass:
Дефолтный таск Gulp
Также, необходимо создать автономный таск для очистки кеша Gulp, чтобы его можно было вызывать простой командой gulp clear:
Если у вас возникнут проблемы с изображениями или другими кешируемыми файлами, просто почистите кеш.
В результате, у нас должен получиться такой gulpfile.js:
Чтобы установить все пакеты и зависимости для скачанного примера, выполните команду npm i в папке проекта.
В этой статье рассмотрим пример Gulp окружения, которое можно использовать для комфортной фронтенд разработки веб-проекта. Данный пример по умолчанию сконфигурирован для создания сайтов и веб-приложений, в основу которых положен фреймворк Bootstrap 4.
Видео к этой статье:
Инструкция по установке Gulp окружения
Для создания окружения необходимо иметь следующие установленные программы:
- "Node.js" (загрузить установщик "Node.js" для своей операционной системы можно c этой страницы; для проекта требуется версия программы не ниже 10 );
- "Gulp" (установить Gulp можно посредством выполнения в консоли следующей команды: npm install -g gulp-cli ).
Если вы используете первую версию проекта, то дополнительно необходимо ещё установить пакетный менеджер Bower.
Ключ -g указывает npm , что пакет необходимо загрузить не в текущую, а в общую папку.
Выполнение инсталляции программы Bower осуществляется аналогично Gulp (актуально только для версии проекта 1.0.0):
После установки основных программ необходимо загрузить с Github архив проекта. Для этого можно воспользоваться этой ссылкой. Последняя версия проекта имеет номер 2.2.3.
Далее следует распаковать архив и перенести файлы из каталога "gulp-project-bootstrap-4" в корневую директорию проекта.
Если нужна не текущая, а какая-то определённая версия (например, 1.0.0), то её можно загрузить со страницы Releases.
Следующий этап – это установка npm пакетов и их зависимостей. Для этого в консоли (должны находиться в корневой директории проекта) необходимо выполнить команду:
Данная команда установит все пакеты, которые нужны как для работы самого окружения, так и для фронтенда. Выполняет npm эти действия в соответствии с инструкциями, написанными в файле "package.json".
При использовании первой версии проекта (1.0.0), в которой используется менеджер пакетов Bower, необходимо выполнить ещё команду:
Данная программа установит фронтенд пакеты, указанные в файле "bower.json".
Как использовать Gulp окружение?
Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp (обычный режим):
После ввода этой команды запустится задача по умолчанию, т.е. "default". Эта задача в свою очередь запустит серию других задач: "build", "webserver" и "watch".
Задача "build" выполнит сборку проекта для продакшена (т.е. она запустит "clean:build", "html:build", "css:build", "js:build", "fonts:build" и "image:build"). Эти задачи поместят в папку "assets/build" результирующие файлы проекта.
Задача "webserver" предназначена для запуска локального веб-сервера с «живой перезагрузкой» страниц в браузере. С помощью него можно очень просто посмотреть проект и выполнить его тестирование.
Задача "watch" используется для отслеживания изменения исходных файлов в папке "assets/src" и выполнение если это призошло различных задач. Другими словами, она позволяет автоматически запускать необходимые задачи и поддерживать результирующие файлы (содержимое папки "assets/build") в актуальном состоянии.
Кроме этого можно выполнять выборочную (самостоятельную) сборку той или иной части проекта.
Например, для сборки только CSS части сайта достаточно ввести команду:
Список других задач:
Описание Gulp окружения
В этом разделе разберём:
- основные инструменты и файловую структуру Gulp окружения;
- как осуществляется подключение исходников Bootstrap к проекту и их настройка;
- как самостоятельно (с нуля) выполнить инициализацию Gulp проекта и установку зависимостей (без использования готового package.json)
- как с нуля выполнить инициализацию Bower и установку фронтенд пакетов (без использования готового "bower.json")*;
- содержимое файла сборщика проекта Gulp (gulpfile.js)
* Менеджер пакетов Bower не используется в проекте, начиная с версии 2.0.0.
Список инструментов
Окружение, предназначенное для разработки фронтенд проекта (сайта), построено на базе следующих инструментов:
- Node.js (среды, в которой будет выполняться окружение);
- npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов);
- jQuery, Popover, Bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);
- Gulp и его плагины (будут использоваться для сборки проекта и выполнения других веб задач).
В первых версиях проекта дополнительно ещё использовался пакетный менеджер Bower. Он применялся за загрузки библиотек jQuery, Popover и Bootstrap. В версиях проекта, начиная с 2.0.0, загрузка данных библиотек выполняется посредством npm.
Файловая структура Gulp проекта
Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого она создаётся.
В данной статье будем придерживаться следующей структуры:
В корне проекта расположена папка "assets" и файлы "gulpfile.js", "package.json". Файл "gulpfile.js" будет содержать задачи для сборщика проекта Gulp.
В первой версии проекта также использовались файлы ".bowerrc" и "bower.json". Файл "bower.json" - это конфигурационный файл менеджера Bower, на основании которого определялись необходимые для загрузки фронтенд пакеты. В данном проекте он использовался для загрузки Bootstrap, jQuery и Popper.
В папке "assets" находятся две папки: "src" (для исходных файлов) и "build" (для готовых файлов; в эту папку их будет помещать сборщик Gulp). В папке "src" расположены каталоги "fonts" (для шрифтов), "img" (для исходных изображений), "js" (для js-файлов), "style" (для стилей) и "template" (для HTML фрагментов) и файл "index.html".
В первой версии проекта в папке "src" ещё находилась директория "bower_components". Она предназначалась для компонентов, загрузка которых выполнялась с помощью Bower. В текущей версии её нет.
В каталоге "js" распологаются два файла: "main.js" и "my.js". Файл "my.js" используется для написания своих скриптов, а "main.js" – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге "build").
Директория "style" отведена под стили. В данной директории находятся три файла: "main.scss" (содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), "my.scss" (используется для написания своих стилей) и "variables.scss" (содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).
Файл "index.html" - это главная страница создаваемого проекта. Кроме "index.html" в данную директорию можно поместить и другие html страницы.
Директория "template" предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы "head.html" и "footer.html", и импортировать их содержимое (используя синтаксис //= путь_к_файлу ) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.
Подключение исходников Bootstrap 4 к проекту и их настройка
Существуют разные способы подключения фреймворка Bootstrap 4 к проекту, а также варианты работы с ним.
Наиболее гибкий вариант заключается в использовании исходных кодов. В этом случае можно не только очень просто изменять дефолтные стили Bootstrap, но и подключать к проекту только те классы и компоненты, которые в нём будут использоваться.
Исходные коды CSS стилей Bootstrap 4 написаны на языке SCSS и представлены посредством большого количества небольших файлов.
Список SCSS файлов (расположены в каталоге "node_modules/bootstrap/scss/"): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", "reboot.scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions.scss", "dropdown.scss" и др.
Каждой такой файл выполняет либо определённую служебную задачу, либо отвечает за стилизацию какой-то определённой функции фреймворка или компонента. Файлы SCSS имеют краткие и понятные имена. Используя только их можно достаточно точно понять назначение каждого из них.
Настройка или изменение дефолтных стилей Bootstrap 4 осуществляется посредством переопределения значений переменных SCSS. Все SCSS переменные для удобства собраны в одном месте (в файле "variables.scss"). Но, переопределять их значения желательно, конечно же, не в этом файле, а в своём (например, имеющим такое же имя "variables.scss", но находящемся в "assets/style/variables.scss").
Например, изменение цвета тем success и danger, осуществляется посредством изменения значений переменных $green и $red :
Обратите внимание, что после копирования переменных Bootstrap 4 в свой файл CSS ("assets/style/variables.scss"), у них необходимо убрать метку !default .
Метка !default предназначена для установления SCSS переменной значения по умолчанию. Если же у SCSS переменной уже есть значение, то новое значение, если оно указано с ключом !default , установлено не будет.
Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, выполняется посредством SCSS файла "assets/style/main.scss". Другими словами именно содержимое этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.
Кроме этого, к этому файлу также подключёны файлы "assets/style/variables.scss" (для переопределения переменных Bootstrap) и "assets/style/my.scss" (для создания своих стилей).
Содержимое файла "main.scss" (пример):
Кроме этого, для работы некоторых компонентов Bootstrap 4 нужен ещё JavaScript код.
Список js-файлов Bootstrap 4 (находятся в каталоге "node_modules/bootstrap/js/dist/"): "util.js", "alert.js", "button.js", "carousel.js", "collapse.js", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" и "toast.js".
Определение какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, выполняется посредством "main.js".
Импортирование нужных файлов в результирующий build/main.js осуществляется посредством следующей конструкции:
Выполняет это действие будет Gulp плагин "gulp-rigger". Как его установить и подключить будет описано ниже.
В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и при необходимости свои js-файлы.
Содержимое файла "main.js" (пример):
Как с нуля выполнить инициализацию Gulp проекта и установку зависимостей?
Начинается разработка проекта обычно с создания файла "package.json" (манифеста).
Файл "package.json" будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.
Для создания манифеста, необходимо перейти в корневую папку проекта и ввести команду:
После ввода команды необходимо ответить на следующие вопросы:
- имя проекта (name) – "bootstrap-4";
- номер версии (version) – "2.0.0";
- описание (description) – "Start project with use Bootstrap 4";
- автор (author) – "itchief.ru";
- git репозиторий (git repository) - "";
- точка входа (entry point), тестовая команда (test command), лицензия (license), ключевые слова (keywords) – значения по умолчанию.
На вопрос «Is this ok?» ответим "yes" или нажмём Enter .
В результате в корневой папке проекта появится файл "package.json".
Теперь установим пакеты, которые будем использовать в проекте с помощью следующей команды:
Ключ "--save-dev" или "--save-prod" определяет в какую секцию файла "package.json" попадёт информация о нём.
Список пакетов, которые будут использоваться в проекте:
После установки всех зависимостей, файл package.json будет иметь следующее содержимое:
Как с нуля выполнить инициализацию Bower и установку фронтенд пакетов?
Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл .bowerrc и введём в него следующее:
Сохраним файл .bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .
Выполним инициализацию Bower (создадим файл-манифест bower.json ). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):
Инициализация Bower
После этого необходимо ответить на следующие вопросы:
В результате этих действий будет создан файл bower.json .
Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.
Для этого в консоли необходимо ввести следующую команду:
Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .
В результате bower.json будет иметь следующее содержимое:
Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:
Описание файла сборщика проекта Gulp (gulpfile.js)
Все действия, выполненные до этого, были подготовительными. Весь функционал, который будет выполнять создаваемое окружение, будет определяться файлом "gulpfile.js".
Файл "gulpfile.js" представляет собой список задач.
Основные задачи которые будут выполнять этот файл:
- сбор нескольких файлов стилей в один, компиляция полученного SCSS в CSS, добавление автопрефиксов, минимизация CSS и создание source map;
- импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
- сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.
Кроме этого чтобы эти задачи не запускать при изменении исходных файлов вручную, создадим ещё одну задачу "watch". Она будет отслеживать изменения файлов, и запускать определённые задачи автоматически.
Код файла "gulpfile.js" (при использовании Gulp 4):
Код файла "gulpfile.js" содержит комментарии. С помощью них поясняется что выполняет тот или иной фрагмент инструкций.
Создание задачи в Gulp выполняется очень просто:
Задачи в gulp построены очень просто. Их каркас действий в большинстве случаев можно представить так:
Давайте по-честному, настраивая инструмент для сборки проектов (таск-менеджер), большинство разработчиков ищут предыдущий проект с подходящей структурой и просто копируют Grunt или Gulp файл и вносят необходимые правки (меняют названия папок для нового проекта и так далее).
Даже переход с одного таск-менеджера Grunt на другой, более новый, Gulp – это обычно поиск соответсвующего npm-пакета для Gulp, наподобие аналогичного плагина grunt-contrib. Раньше работали со связкой Grunt-contrib-Stylus? Значит, для нового таск-менеджера выбираем Gulp-Stylus. Необходим grunt-contrib-jshint? Наверняка, аналогичный пакет gulp-jshint выполняет те же задачи. А дальше — лишь соответствующие изменения синтактиса.
Таким способом можно быстро и особо не задумываясь настроить таск-менеджер для маленьких проектов. Но после нескольких месяцев работы в Pellucid над приложением, которое в моей практике является самым крупным проектом на Javascript, когда на выполнение задач такс-менеджера всё чаще должно уходить не более 10 секунд, пришлось задуматься об оптимизации.
В качестве небольшого примера для тестов и экспериментов, я создал демо-репозиторий. В проекте используется jQuery, Lo-dash и Handlebars, а также порядка 50 CommonJS модулей (около 0,5 Mb), чтобы Browserify было, с чем работать.
В этом репозитории наш идеальный таск-менеджер (идеальный вдвойне, потому что очень быстрый — но об этом чуть позже) будет делать следующее:
- предварительная обработка, префиксация и сжатие CSS;
- анализ нашего javascript-кода с подсказками (Lint/Hint), сборка файлов с Browserify и их минификация с Uglify;
- отслеживание изменений и применение к ним задач, указанных выше.
В наших рабочих проектах Pellucid задач при настройке таск-менеджера обычно бывает больше, но эти — самые времязатратные, и в этом примере мы рассмотрим общий случай, применимый ко многим front-end проектам.
Ускорим процессы
В идеальном мире наш Gulpfile мог бы выглядеть так. Довольно просто: мы взяли наш список преобразований и разбили его на Gulp-задачи. Код быстро пишется, легко читается и выполняет всё, что от него требуется.
Однако, даже в нашем сравнительно небольшом демо-приложении, на моём ноутбуке это занимает более 4 секунд (показатель time gulp). Для первоначальной компиляции это допустимое время, но в связи с рекомпиляцией после каждого внесённого изменения благодаря нашей команде watch, время ожидания на тестирование наших изменений становится значительным.
Давайте запустим одни из самых медленных процессов и подумаем, как их ускорить.
Связка Browserify-Watchify
Наш js-task будет по-прежнему использовать Browserify (чтобы компилировать Javascript без запуска команды watch) , но давайте вместо gulp-browserify, который был внесён в чёрный список разработчиками Gulp, воспользуемся Browserify напрямую.
Прим.: gulp-browserify блокирует работу Browserify в версии 3.x. Используя Browserify напрямую, мы можем работать с последней версией 5.x, в которой другие настройки конфигурации.
А для мониторинга нашей системы файлов мы воспользуемся Watchify, вместо аналогичного Gulp watch.
Большинство новых параметров, которые мы передаём Browserify, необходимы для работы Watchify. Как вы заметили, мы убрали задачу uglify на этапе watch. Поскольку с помощью этой задачи мы делаем тестовые сборки, не имеет смысла замедлять процесс минификацией.
Теперь, благодаря Watchify, время сборки после пересохранения JS файлов в нашем тестовом проекте уменьшилось с 3-4 секунд до 200 мили-секунд. В Pellucid эти показатели были — с 7 секунд до одной. Одного этого улучшения было бы достаточно, чтобы возгордиться собой и закончить с оптимизацией. Однако, мы можем сделать кое-что ещё.
Дополнительная оптимизация Browserify
Если в своём проекте вы используете библиотеки, для работы которых не нужны сторонние модули, Browserify этого не знает, и будет парсить код на предмет команды require() в любом случае, что часто крайне времязатратно. Чтобы ускорить процесс, вы можете передать Browserify массив модулей, которые не нужно парсить:
Это никак не скажется на времени наших последующих сборок, зато сэкономит нам 200-300мс при первоначальной сборке. Но имейте в виду, если вы используете browserify-shim и сторонний плагин, вы не сможете использовать noparse в зависимостях этого плагина. И, напоследок, если вы используете Browserify в автономной сборке, которая не зависит от контекста CommonJS, работайте с последней версией Browserify, поскольку предыдущие версии использовали derequire, что может сильно замедлить работу вашей сборки. Если вы ограничены версией ранее 5.x., не включайте в задачу watch автономные сборки.
Фильтруем неизменённые файлы
Ещё одна задача, занимающая много времени — анализ кода с подсказками (hinting). Работа jshint в нашем демо-репозитории занимает лишь 500мс, однако, в крупном проекте это время доходит до нескольких секунд.
Для работы с Gulp сборками рекомендуется использовать специальные инструменты, и одним из лучших является gulp-cached. Подключаете в вашу сборку gulp-cached, который кэширует в памяти содержание всех файлов. При последующем выполнении задач, Gulp сначала сравнивает файлы с кэшированными, и подвергает дальнейшим преобразованиям только те файлы, в которые были внесены изменения.
В наших проектах Pellucid эта хитрость экономит несколько секунд в JSHint операциях. Даже в нашем с вами тестовом приложении такой подход уменьшил время на hinting с 500мс до менее 100мс.
Этот метод будет работать и с другими файлами, которые должны быть обработаны только в случае внесения изменений. Например, если вы сжимаете большое количество изображений, обрабатывая только изменённые фотографии, вы существенно увеличиваете скорость работы.
Если вы беспокоитесь, что это займёт много памяти, особенно в случае с большим количеством изображений, можно установить флаг optimizeMemory, который будет хранить md5 hash вместо полного содержания файлов. Кроме того, можно использовать gulp-change и gulp-newer, которые сравнивают временные метки вместо сохранения содержимого в памяти.
Если понадобится вернуть файлы в поток данных, например, если вы применили hint лишь для изменённых файлов, а связать (concatenate) хотите все имеющиеся файлы — это можно сделать с помощью gulp-remember.
Разделение рабочих задач
Мы не минифицируем (uglify) нашу тестовую JS-сборку, но можно применить кое-какие хитрости и для рабочих сборок. Это несколько увеличит скорость работы, тк мы будем выполнять операции, необходимые лишь для той или иной сборки. Для начала, разрешим передавать флаг –prod в Gulp сборку с помощью gulp-util, и сохраним в переменной для быстрого доступа.
Теперь внутри различных задачек в зависимости от наличия или отсутствия –prod мы либо выполняем нужные операции, либо применяем gutil.noop() , который просто передаётся в поток.
Например, в нашем Browserify таске, мы создадим карты исходников (source maps) для тестовой сборки, а для рабочей — применим Uglify:
Аналогично, в нашем Stylus таске, номера строк (или, если хотите, новые подключенные карты исходников) - для тестовой сборки, а минификация — для рабочей:
Если вам привычнее вместо параметра –prod работать с таском gulp prod, можно делать и так, с помощью run-sequence:
Изменения, которые мы внесли в Gulp file, существенно ускорили работу наших сборок , особенно последующих, что крайне важно. Использование Watchify дало наилучший результат, сократив время с 3с до 200мс. Кэширование файлов также сэкономило нам несколько сотен миллисекунд в таске hint. Мы разделили тестовые и рабочие задачи, что позволило совершать только те операции, которые необходимы в данный момент. Это позволит добавлять source maps, отлаживать hints в тестовой сборке, и минифицировать всё — в рабочей.
Для сравнения, вот наш первоначальный Gulpfile, собирающий и пересобирающий всё в течение 4 секунд. А вот наш оптимизированный Gulpfile, с более высокой скоростью сборки и пересборкой в 10 раз быстрее.
Broccoli – новый инструмент для сборки проектов, с акцентом на улучшенные пересборки. Если вы внимательно прочитаете пост о первом релизе Broccoli, заметите, что этот таск-менеджер создавался для решения проблем, со многими из которых мы боролись выше.
«Broccoli serve автоматически определяет, какие файлы отслеживать (watch) и пересобирает только те, которые того требуют. Наша цель — менее 200мс на пересборку с типичным стеком сборки».
Звучит отлично, с одной оговоркой. Поддерживаемый сообществом плагин Browserify для Broccoli не работает с Watchify. Способность Broccoli “пересобирать только те файлы, которые того требуют” не применима в контексте полноценной Browserify сборки. Поскольку Browserify с самого начала был нашей основной головной болью, отсутствие Watchify делает Broccoli не привлекательным вариантом на данный момент.
Признаюсь, об этой теме мы немного умолчали. Рекомендованные Gulp инструменты для последующих сборок, такие как gulp-cached, не сильно нам помогут в тех случаях, когда нужно обрабатывать большое количество входных файлов, объединяя их в один конечный файл. Для последующих CSS сборок понадобится специальный инструмент, делающий примерно то же, что Watchify для Browserify, и подобные инструменты для Stylus мне не известны.
В Pellucid, компиляция более, чем 300 Stylus файлов, содержащих более 2300 селекторов, занимает 2-3 секунды. Изменения в файлы стилей вносятся не так часто, как в javascript файлы, поэтому это допустимые показатели.
Я наслышан ужастиков о компиляции Ruby Sass, занимающей 20-30 и более секунд. В этом случае вам стоит задуматься о переходе на port C в Sass, который в разы быстрее. Вот отличная статья в блоге Treehouse, в которой они рассказали, как сократили время Sass-сборки с 50 до 3 секунд.
Существует немало способов атвоматизации сборок, что, несомненно, ускоряет рабочий процесс. Существует множество разнообразных способов настраивания вашего Gulp File: от популярных, таких как LiveReload и автоматизированных тестов, до более сложных — поднятие пакетных версий (gulp-bump) и развёртывание на Heroku.
Надеюсь, в этой статье мы затронули самые наболевшие вопросы: типичные задачи, работающие с большим количеством файлов, запускаемые и перезапускаемые при каждом последующем пересохранении файлах. Если вы заметили, что ещё какие-то задачи замедляют вашу работу — и, особенно, если вы придумали, как эту проблему решить — обязательно поделитесь с нами в комментариях!
Читайте также: