Gulp. Урок 3. Подключение плагинов. Сборка less файлов


Содержание материала:

9 плагинов gulp для сборки проектов

Эта статья предполагает, что у вас уже есть некоторый опыт работы с Node.js, npm и вы довольно хорошо знакомы с концепцией сборщиков и интерфейсом командной строки. Это те базовые вещи, которые необходимы, чтобы начать работать с gulp.js.

Как и другие системы сборки, все начинается с установки самого gulp’а командой npm install gulp и создания файла сборки gulpfile.js в корневой директории проекта. Для тех людей, вроде меня, которые сразу же хотят знать, поддерживает ли gulp.js CoffeeScript, ответ — да, но для этого необходимо добавить require(’./gulpfile.coffee’) в gulpfile.js.

Теперь, когда мы со всем этим разобрались, давайте настроим сборщик для поддержки нашего HTML5 node.js приложения.

gulp-util

Это официальный инструмент для gulp.js. Авторы решили выделить вспомогательные функции в отдельный модуль, который, в конечном итоге, все равно нужно каждый раз подключать. Сюда относится такая функциональность, как логирование, подсветка вывода в консоли, и так далее. Полный список можно посмотреть на странице gulp-util на Github.

Поскольку это вспомогательный модуль, нет конкретного примера, где мы могли бы его использовать, мы будем его использовать все время.

gulp-clean

Первое, что должна сделать любая уважающая себя система сборки, это очистить сборочную директорию и удалить все, в ней находится.

Теперь вы можете запустить команду gulp clean и директория build будет очищена.

gulp-concat

Можно предположить, что ваше HTML5 приложение имеет несколько внешних зависимостей, таких как jQuery, возможно Modernizr и т.д. Вместо того, чтобы подключать зависимости в отдельных тегах

Как установить gulp и плагины

Gulp и множество утилит для него подходят для решения любых задач в разработке от небольшого сайта до крупного портала.

Все проекты использующие gulp имеют в корне файл gulpfile.js.

Для начала устанавливаем gulp у нас должен быть установлен node.js.

Скачиваем его с официального сайта, последнюю версию.

Создаем новый проект

Создаем папку для проекта с любым названием, например, project.

Заходим в нее, зажимаем shift и удерживая его нажимаем правою кнопку мышки.

В появившемся окне выбираем пункт с названием открыть окно команд.

Для устанвоки gulp прописываем команду npm I gulp -g.

G означает, что мы устанавливаем глобально.

Важно, что бы в пути до команды не было русскоязычных папок, путь весь на английском.

Создаем проект командой npm init.

В папке project появится файл package.json.

Видим всю информацию, которую прописали в окне консоли.

Этот файл содержит информацию об используемых пакетах в программе.

Удобно при создании новых проектов с уже заготовленным файлом.

Устанавливаем gulp в наш проект командой npm i gulp –save-dev.

Ключ —save-dev позволяет сохранять версию в package.json.

Также появится новая папка node_modules, в которой содержится пакет gulp и необходимые зависимости для корректной работы основного пакета.

Создаем две новые папки

В папке app создаем пять папок.

  1. папку css тут все стили
  2. fonts где лежат шрифты
  3. img для картинок
  4. js для скриптов
  5. sass для файлов с этим расширением.

Переходим в корневую папку проекта project.

Мы создали структуру проекта.

В папке app лежат все исходники проекта.

В папке дист будет готовый продукт после сборки оптимизированный и сжатый.

Наш первый task

Создаем gulpfile.js в корне.

Открываем его и прописываем первую строчку подключения модуля, который установили.

Gulp для начинающих

Gulp – это инструмент автоматизации front-end разработки. Он поможет вам автоматизировать рутинные задачи и ускорит вашу работу. Возможно вы уже работали с другой системой сборки Grunt. Сравнение Gulp и Grunt показывает, что Gulp на данный момент более перспективный инструмент и стоит обратить на него внимание.

Основные задачи, которые вам поможет решить Gulp:

  • Минимизация и конкатенация Javascript и CSS файлов;
  • Минимизация HTML;
  • Использование CSS препроцессоров Sass, Less, Stylus и других;
  • Оптимизация изображений;
  • Автоматическая простановка вендорных префиксов;
  • Использование шаблонизаторов (Jade);
  • Удаление неиспользуемого CSS (UnCSS);
  • Валидация кода и тестирование;

Ссылки на ресурсы

Официальный сайт Gulp gulpjs.com
Gulp на Github
Каталог плагинов для Gulp http://gulpjs.com/plugins/
Документация Gulp (на английском) ссылка

Установка Gulp

На вашем компьютере должен быть установлен Node.js. Скачать его можно по ссылке. Небольшая инструкция по установке.

После установки Node.js откройте командную строку и введите команду:

npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.

Флаг — global указывает, что Gulp надо установить на компьютер глобально для использования в любом месте системы.

Создание проекта

Создадим папку project для нашего проекта. Откройте командную строку и перейдите в папку с вашим проектом:

Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).

Когда файл package.json создан, мы можем установить Gulp с помощью команды:

На этот раз – g не был использован и Gulp локально установится в папку project.

— save — dev вносит в уже существующий файл package.json запись о Gulp в секцию devDependencies.

После выполнения команды вы увидите, что в директории project появилась папка node_modules, внутри которой лежит папка Gulp.

Мы почти готовы начать проект с Gulp. Но перед этим необходимо определиться со структурой проекта.

Определяем файловую структуру

Gulp достаточно гибок, чтобы работать с любой файловой структурой. В этом проекте мы будем использовать следующую структуру:

В папке app будет находится рабочая версия проекта. В папке dist будет лежат продакшн версия проекта.

Мы должны помнить об этой структуре файлов, когда конфигурируем задачи Gulp.

Создадим первую задачу в файле gulpfile . js , в котором хранится вся конфигурация Gulp.

Пишем первую задачу Gulp

Базовый синтаксис задачи Gulp:

task — name ссылается на имя задачи, которое вы будете использовать для запуска задачи. Задачу можно запустить командой gulp task-name.

Для теста создадим задачу hello, которая выведет Hello Zell!

Запустим команду gulp hello в командной строке.

В командной строке появится сообщение Hello Zell !

Задачи в Gulp обычно намного сложнее. Вот как может выглядеть реальная задача:

Как вы видите, реальная задача содержит два дополнительных метода gulp . src и gulp . dest .

gulp . src говорит, какие файлы использовать для выполнения задачи.

gulp . dest указывает, куда положить файлы после выполнения задачи.

Создадим реальную задачу, где мы скомпилируем Sass файлы в Css.

Препорцессинг с Gulp

Мы можем компилировать Sass в Css с помощью плагина gulp-sass. Для установки gulp-sass надо запустить команду:

В gulpfile . js необходимо записать:

Создадим задачу sass ( )

[/crayon]
Далее нам необходимо создать файл

в папке app/scss и указать путь к этому файлу в gulp.src. Скомпилированный файл styles.css будет лежать в папке app/css. Укажем эту папку в gulp.dest.

Для проверки правильности настройки задачи, добавим функцию sass в файл styles . scss .

Если вы запустите команду gulp sass в командной строке, то вы увидите, что в папке app/css появится файл styles . css , в котором будет следующий код:

Теперь мы знаем, как работает задача sass.

Если вам необходимо выбрать несколько файлов в gulp.src, то можно использовать специальные выражения.

  • * . scss : Символ * — означает, что будут выбраны все файлы с расширением .scss в указанной директории;
  • * / * . scss — будут выбраны все файлы с указанным расширением в корневой папке и всех дочерних папках;
  • * / * . scss . Символ ! указывает, что данный файл надо исключить из выполнения задачи;
  • * . + ( scss | sass ) — позволяет выбрать для выполнения задач файлы с несколькими расширениями. В данном случае будут выбраны все файлы с расширениями . scss и . sass из указанной директории.

Теперь мы можем заменить app/scss/styles.scss на scss/ **/*.scss.

Любой файл с расширением .scss находящийся в папке app/scss будет скомпилирован. Например, если добавить print.scss, то мы увидим, что в папке app/css появится скомпилированный файл print.css.

Компилируем Sass «на лету»

С помощью метода watch можно отслеживать изменения в файлах. Синтаксис метода:

Все о WEB программировании

WEB программирование от А до Я

Заказать сайт:

Социальные сети:

Партнеры:

Настройка GULP для верстальщика

Доброго времени суток. В данной статье мы поговорим о настройках Gulp для верстальщика. Я на своем примере покажу как установить и настроить Gulp для проекта, какими пакетами я пользуюсь для автоматизации. Как настроить задачи в Gulp и как объединить выполнения нескольких задач в одну.

Что такое Gulp?

Gulp – это менеджер задач для автоматического выполнения их. Gulp написан на языке программирования JavaScript. Для запуска задач используется командная строка. Для конфигурации используется файл gulpfile.js. Распространяется через менеджер пакетов npm.

Установка Gulp для проекта.

Для установки gulp у нас должен быть установлен npm. Что такое npm и для чего он нужен очень хорошо описано в статье «npm для простых смертных» .

Открываем терминал и переходим в папку с проектом. Первое, что нам необходимо сделать это инициализировать npm для этого выполняем команду:

От вас потребуется:

  • Указать название проекта
  • Версию проекта
  • Описание проекта
  • Точку входа
  • Команду
  • Git репазиторий
  • Ключевые слова
  • Имя автора
  • Лицензия

Все можно оставить по умолчанию (если вы не хотите выкладывать проект в общий доступ)

Затем подтверждаем введенную информацию.

Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.

Теперь мы можем установить gulp. Вначале надо установить его глобально, а затем для проекта. Для глобальной установки выполните следующую команду:

Теперь установим gulp для проекта:

Все gulp для проекта установлен.

Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».

Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:

  • Название задачи
  • Анонимная функция в которой описывается наша задача

Теперь в консоли выполните следующую команду

Теперь давайте установим и подключим пакеты, которые помогают при верстке.

Browsersync, пакет который позволяет при изменении файлов обновлять страницу автоматически

Для установки в консоли выполняем следующую команду:

Теперь давайте создадим задачу, которая будет запускать browser-sync и отслеживать изменения файлов.

Задача называется serve. И browser-sync будет обновлять страницу браузера автоматически, если изменились файлы с расширением css (которые расположены в папке src/css) и с расширением html (которые расположены в папке src).

Для запуска данной задачи выполняем команду

Для верстки я использую sass. Поэтому для компиляции из sass в css я использую пакет gulp-sass.

Установка и настройка gulp-sass

Для установки gulp-sass в консоли выполняем команду:

Теперь создадим задачу sass, которая будет компилировать sass в css. И изменим задачу serve, чтобы наш browser-sync отслеживал вместо css файлы sass.

Теперь при запуске задачи serve, будет запускаться задача sass.

Отлично. Дальше установим и подключим пакет gulp-autoprefixer, который будет добавлять к css стилям префиксы (для старых браузеров).

Установка и настройка gulp-autoprefixer

Для установки gulp-autoprefixer выполним команду:

И добавим в задачу sass добавление префикса.

Теперь при запуске задачи sass у на с будет:

  1. Компилирование sass в css
  2. Добавление префиксов
  3. Сохранение файла в src/css

Следующий пакет объединяет все css файлы в один.

Установка и настройка contactCss

Для установки contactCss используем следующую команду:

И добавим выполнение данного пакета в задачу sass. (Будем все файлы css объединять в style.css)

Отлично. Теперь добавим пакет, который переименовывает файлы. (Он нам понадобится, кода мы будем минимизировать css, и js файлы)

Установка и настройка gulp-rename

Для установки gulp-rename выполним следующую команду:

Пока данный пакет не будем добавлять ни в какие задачи.

Установка и настройка пакета для минимизации CSS файлов – clean-css

Для установки clean-css выполним следующую команду:

Теперь давайте создадим задачу mincss, которая будет добавлять к имени файла суффикс «.min», минимизировать css файл и сохранять в app/css

Отлично, давайте установим gulp пакет, который будет минимизировать js файлы.

Установка и настройка пакета gulp для минимизации js файлов —gulp-uglify

Для установки gulp-uglify выполним следующую команду:

Теперь создадим задачу, которая будет добавлять к файлу суффикс «.min», минимизировать файл js и сохранять в app/js

Мы создали основные задачи. Но две последние должны выполняться при выкладывании проекта в продакшен. И выполняться должны вместе. Давайте создадим задачу, которая будет выполнять задачу mincss, а потом minjs

Создание задачи в gulp

Создадим задачу min, которая будет запускать задачи mincss и minjs


Все. Давайте еще зададим задачу по умолчанию.

Задание задачи по умолчанию gulp

Вывод.

Мы с вами рассмотрели для чего нужен gulp, как его установить. Установили дополнительные пакеты, которые необходимы для верстки и задали задачи.

Сборка фронтенда — часть 3. Сборка gulp

В предыдущих частях статьи про сборку фронтенда мы поговорили про основы сборки и написали простое тестовое приложение на backbone + require.js.

Теперь самое интересное — собственно сборка gulp. По ходу статьи мы напишем десяток gulp-задач для различных нужд сборки и подробно разберем, зачем те или иные задачи нужны вообще.

Внимание, это не статья по основам основ gulp! Предполагаю, что Вы знаете, что такое nodejs и npm. Если не знаете, то лучше предварительно погуглите, что это такое и как это все поставить. Установка nodejs, npm и gulp займет у Вас 5-10 минут. А теперь к самой статье.

Мое рабочее окружение

По некоторым причинам мне приходится работать со старой версией nodejs. Поэтому версии плагинов gulp из моего package.json могут отличаться от Ваших. Советую не лениться и не запускать npm install с моим package.json из исходников, а устанавливать все плагины руками, благо, что нужные инструкции в статье будут.

Топ-пост этого месяца:  Искусственный интеллект увеличил продажи ритейлеров на eBay

Все версии плагинов, указанные в исходниках, работают на таком окружении:

  • os — windows7
  • nodejs — 0.10.35
  • npm — 1.4.28
  • gulp — 3.9.1

package.json и gulpfile.js

Это первое, с чего мы начинаем сборку фронтенда — создадим package.json в корне проекта.

Стандартная заготовка, можно ничего не менять. После этого ставим gulp. Если он еще не установлен глобально, то делаем npm install -g gulp

Затем устанавливаем gulp как локальную зависимость для нашего проекта — npm install gulp —save-dev. Опция —save-dev обновит package.json, добавив в него секцию

Теперь создадим пока что пустой файл gulpfile.js, тоже в корне проекта, и приступим к задачам сборки. Начнем с базового — с очистки результатов предыдущей сборки.

gulp-clean — удаление файлов и папок

Как мы помним, собранные файлы будут складываться в папку build в корне проекта (на самом деле мы наследим и в src, но зачем и где — чуть позже). Поэтому перед каждым запуском сборки нужно очищать результаты предыдущей — то есть просто сносить папку build.

Ставим плагин gulp-clean — npm install gulp-clean —save-dev. А в gulpfile.js пишем такой код

Сначала мы объявляем переменные-модули, выполняющие всю работу. Пока это сам gulp и clean, но с каждой задачей раздел будет расширяться.

Зачем нужен объект path? Дело в том, что задач у нас будет много, также будет много путей к файлам и папкам. И их удобнее хранить в одном месте, в конфиге, а не разбрасывать по отдельным gulp-таскам. Сейчас объект небольшой, да еще и с пустыми полями, но по мере написания каждой задачи мы будем добавлять в него новые пути и он очень быстро разрастется. Как Вы уже догадались, в build будут пути к стилям, скриптам и картинкам, уже собранным для продакшена, в src — для разработки, в watch — тоже для разработки, файлы для наблюдения за ними, чтобы запускать задачи сборки в режиме онлайн. Но обо всем по порядку.

Сама gulp-таска в конце собственно и очищает папку build. Попробуйте сейчас создать эту папку, кинуть туда пару файлов и запустить в консоли gulp clean. Убедитесь, что после отработки задачи папки исчезла — то, что нужно.

gulp-sass — собираем стили

Ставим плагин gulp-sass: npm install gulp-sass —save-dev. Теперь сама задача. Давайте договоримся, что пока будем собирать стили для режима девелопера. Как мы помним, в предыдущем уроке мы так и не подключили стили к проекту, хотя и написали sass-модули. Пора это исправить. Дополним раздел var вот так:

Добавим пути к нашему конфигу:

Все просто: указываем, что начальный файл main.scss, который уже подключает в себе все дополнительные sass-модули. А также скажем, что положить выходной файл css мы хотим в папку src/styles. Называться он будет так же, как и sass-файл, только с нужным расширением — main.css.

И сама gulp-таска sass

Теперь запускайте в консоли gulp sass, убедитесь, что main.css создался и обновите страничку проекта в браузере. Если все сделали правильно, то стили применятся, появятся отступы по бокам страницы и поправятся шрифты — все хорошо.

Так как main.css у нас собирается автоматически, то нет нужды держать его в проекте, нужно удалять его при запуске gulp clean. Поэтому обновим конфиг:

Теперь запустите снова gulp clean и убедитесь, что удаляется не только папка build, но и файл main.css.

gulp-sourcemaps — sourcemaps для стилей

Вы могли заметить, что при сборке стилей мы не сжимали выходной файл. Это мы сделаем позже, когда займемся сборкой для продакшена. В режиме девелопера нам ни к чему сжатые стили, для отладки удобнее работать так. Вместо этого сейчас мы настроим sourcemaps.

Что это такое? Мы пишем стили для проекта в sass-файлах. Когда мы захотим отладить верстку, то откроем браузерный dev tools, поправим стили, как нужно и захотим их сохранить в проекте. Вот здесь-то нас и подстерегает неудобство. Стили собраны в один-единственный файл. Хорошо нам с тестовым приложением, где 3 строчки стилей лежат в двух файлах, а как быть со стилями, которые собираются из хотя бы полусотни sass-файлов? Для этого и нужны sourcemaps — эти файлы-«карты ресурсов» «запоминают», какие стили в каких исходных sass-файлах находятся. Что конечно же значительно облегчит работу с версткой.

Чтобы было совсем наглядно, вот два скриншота, как мы ищем, где лежат стили для тега h1. Вот здесь мы собрали стили не зная о sourcemaps: Заметьте, мы ничего не знаем о том, где стили для h1 искать в нашем проекте. А вот как выглядит dev tools, когда мы подключим sourcemaps Заметили разницу? Видно, что стили для h1 лежат в первой строке файла _page.scss. А ниже указаны для body — файл _common.scss — удобно. Надеюсь, если Вы до этого не знали про sourcemaps, то теперь точно захотите ими пользоваться 🙂

К тому же создавать их с помощью gulp очень просто. Ставим плагин npm install gulp-sourcemaps —save-dev. Пара изменений в gulpfile.js

На заметку: sourcemaps с таким же успехом применяются и при склеивании/сжатии js-файлов, так что пользуйтесь этим инструментом на полную. А мы переходим к сборке модулей requirejs в один файл. Если Вы не знакомы с подходом requirejs, то можете просто пропустить следующий раздел.

gulp-requirejs — сборка require.js

Начиная с этого раздела мы наконец-то вспомним, что сборка фронтенда в первую очередь задумана для боевого окружения, поэтому займемся amd-модулями requirejs. Все модули нужно собрать в один файл да еще сжать его и выкинуть в папку build/js с названием build.js. Здесь долго пояснять не буду, сборку мы разобрали в предыдущей части, когда писали тестовое приложение.

Ставим плагин gulp-requirejs npm install gulp-requirejs —save-dev. Подключаем его:

Прописываем новые пути в path

И самое хитрое — задача gulp-requirejs и конфиг для нее

Подробно объяснить здесь сложно, нужно знать принципы подключения requirejs и внимательно следить за путями к файлам и папкам. Если Вам лень в этом разбираться, то можете просто использовать этот готовый конфиг и по мере надобности понемногу в нем ковыряться.

Почему requirejs:build? Потому что для подключения собранного файла нам нужно будет сначала подключить библиотеку require.js в index.html, и поэтому мы сейчас напишем таску requirejs:copy, которая копирует нужную нам либу в папку build — готовит все для продакшена. Но пока запустите gulp requirejs:build и убедитесь, что сгенерировался файл build/js/build.js.

gulp-contrib-copy — копирование файлов

Теперь нам нужно скопировать файл src/lib.require.js в папку build/js, чтобы все было готово для подключения javascript на странице. npm install gulp-contrib-copy —save-dev Обновляем gulpfile.js

Запустим gulp requirejs:copy_lib и увидим, что в папке build/js/ рядом с build.js появился require.js — значит, все получилось! Идем дальше.

gulp-uglify — сжатие js-файлов

В двух последних задачах requirejs:build и requirejs:copy_lib мы подготовили два файла, предназначенных для боевого окружения. Но хорошим тоном считается сжатие файлов для уменьшения трафика пользователей и ускорения загрузки. В этом нам поможет плагин gulp-uglify.

Ставим. npm install gulp-uglify —save-dev. Сам по себе плагин не используется, он действует совместно с другими задачами, в нашем случае это будет и сборка requirejs:build, и копирование библиотечки requirejs:copy_lib. Поправим код

Посмотрим, что мы изменили. Кроме стандартного подключения, мы добавили всего лишь одну строку .pipe(uglify()) к нашим задачам непосредственно перед формированием выходных файлов. Теперь запустите обе gulp-таски снова и проверьте, что в build/js/ лежат те же файлы, только уже минифицированные — и это пригодно для продакшена. Переходим к последней на сегодня задаче сборки javascript — посмотрим, как работает плагин gulp-concat

gulp-concat — склеивание файлов

Что и зачем мы собрались клеить? Несмотря на то, что весь js-код мы разбили на amd-модули и собрали с помощью gulp-requirejs, очень часто на проекте возникает необходимость подключить какие-то сторонние скрипты, которые не хочется мешать с основным кодом. Это как правило, скрипты вроде inspectlet и яндекс-метрики, которые в больших количествах любят притаскивать аналитики и маркетологи.

Сложим эти файлы в папке src/scripts, чтобы они не мозолили нам глаза, и будем склеивать их все в один, сколько бы их там ни было, и выкидывать в папку build/js/ под названием scripts.js, предварительно сжав. Ух, какое длинное предложение получилось!
Наши действия: создадим папку src/scripts и создадим в ней для примера 3 файла, google-analytics.js, inspectlet.js и shoppyboom.js. Их содержимое незатейливо:

Установим плагин npm install gulp-concat —save-dev. И теперь gulpfile.js

Все достаточно просто. Указываем исходную папку, из которой будут браться все js-файлы, склеиваться в один под названием scripts.js, сжиматься и выкидываться в папку build/js/ уже третьим и последним по счету js-файлом для продакшена. И конечно же, запускайте gulp scripts и проверяйте, что файл действительно есть с содержимым

Мы вплотную подошли к тому, чтобы запустить наше приложение в production-режиме. Но до этого осталось сделать еще одну важную задачу — оптимизацию и сжатие изображений.

gulp-imagemin и imagemin-pngquant — оптимизация и сжатие изображений

Эти 2 плагина мы используем для обработки наших изображений, и неважно, что у нас всего одна картинка. Один раз настроим задачу сборки и забудем про изображения в идеале навсегда.

Установка npm install gulp-imagemin —save-dev и npm install imagemin-pngquant —save-dev. Но здесь хочу обратить Ваше внимание. Именно с этими плагинами у меня прошло не все так гладко. С моей старой версией ноды 0.10.35 согласились работать плагины только с версиями 2.1.0 и 4.1.2 соответственно.

Пробуйте сначала ставить их, как обычно, последние версии по умолчанию. Если Вы столкнетесь проблемой сборки, в консоли будут сыпаться gulp ошибки при сборке или даже при установке. И тогда придется с гуглом наперевес искать подходящие под Вашу ноду версии оных плагинов. Ставить их придется с указанием конкретной версии, вот так npm install gulp-imagemin@2.1.0 —save-dev. Второй плагин аналогично. При этом в package.json имеет смысл убрать ^ из версии плагинов, то есть

Иначе когда Вы захотите обновить версии всех плагинов и запустите npm install, то рискуете обновиться и поломать сборку картинок. А затем долго и нудно возвращать старые версии. Впрочем, будем надеяться, что с Вашей адекватной версии ноды все прекрасно установится и по умолчанию. Редактируем gulpfile.js

Если с плагинами все хорошо и все сделали правильно, то запуск gulp img соберет нам все картинки (всю одну) и выкинет в build/img/ в сжатом виде. Проверяйте. А мы меж тем переходим к самой интересной на мой взгляд теме — препроцессинга html и окончательному формированию production-окружению.

gulp-preprocess — препроцессинг html

На самом деле, плагин умеет препроцессить не только html, но и js, что тоже бывает очень полезно. Но в нашем случае мы рассмотрим только html. Давайте поставим плагин, дабы не забыть про него, и затем разберемся, а что же такое препроцессинг и зачем он нужен.
npm install gulp-preprocess —save-dev

Представим, что у нас настроены задачи для генерации двух вариантов css-файлов: сжатых (для production) и обычных с sourcemaps (для development). А еще мы в режиме разработки не хотим подключать упомянутые ранее js-файлы скриптов, но хотим их на production. А если мы разрабатываем SPA и общаемся с сервером через api, то адреса серверов могут быть различными. Например, на боевом сайте мы обращаемся к серверу по запросам вида webdevkin.ru/api/v1/, но параллельно работаем над новой версией api и тестируем ее на test.webdevkin.ru/api/v2/.

Все эти варианты сводятся к тому, что например, главный html-файл в разных режимах будет пусть и парой строк кода, но различаться. Каждый раз помнить об этом и руками менять нужные строки скучно и чревато ошибками, потому и придумали препроцессинг. Мы готовим шаблон-заготовку html-файла, прогоняем его через задачу препроцессинга и на выходе получаем файл с нужными настройками. Смотрим на примере.

Создадим папку html в src и перенесем в нее файл index.html. Это будет заготовка html, в которой мы чуть поправим содержимое body.

Ничего сложного нет, для режима разработки development мы подключаем require.js из папки lib, а для production — из js. Напомню, что src и build у нас — это корневые папки проектов. И файлы js в них располагаются в разных местах. Плюс для production подключим дополнительно js/scripts.js, которые не нужны нам в разработке.

Надеюсь, ситуация и полезность такого подхода немного проясняется. Осталось сделать так, чтобы эта html-заготовка превратилась в валидный html-файл. В этом нам поможет плагин gulp-preprocess.
npm install gulp-preprocess —save-dev
Добавляем задачу в gulpfile.js

Что мы сделали? Добавили пути в конфиг, указали корневые папки обоих проектов, для src еще указали, где хранится исходный html-шаблон. Не забыли включить генерируемый src/index.html в задачу очистки. build/index.html специально не включаем, папка build и так удаляется целиком. И написали 2 задачи препроцессинга: html:dev и html:prod.

Эти 2 задачи отличаются друг от друга только установкой окружения NODE_ENV и выходными путями, куда складывается преобразованная html. Запустите по очереди gulp html:dev и gulp html:prod и увидите, что в папках src и build соответственно появились index.html с разным, нужным нам содержимым.

Итак, js-скрипты подключаются так, как нам нужно. Но не будем забывать про стили, ибо собранный файл main.css нужно подключать из разных папок: src/styles и build/css. Заменим строку подключения стилей в srс/html/index.html на

Пути к стилям мы указали правильно, но у нас есть только одна задача sass, которая собирает несжатый main.css в src/styles да еще и генерирует sourcemaps. Это отлично для разработки и никуда не годится для боевого сайта. Давайте это исправим. Сначала добавим путь к стилям в build

А затем вместо задачи sass создадим две: sass:dev и sass:prod.

Видим, что для сборки development ничего не поменялось, кроме названия. А вот dev:prod существенно отличается: мы не генерируем в ней sourcemaps, зато сжимаем выходной файл опцией . Как обычно, проверяйте, что все работает, gulp sass:dev и gulp sass:prod.

Теперь когда мы научились препроцессить html, собирать стили, скрипты и requirejs-модули, копировать файлы и оптимизировать изображения, мы переходим к кульминации статьи — собираем все написанные задачи вместе.

gulp develop и gulp production — запускаем сборку одной командой

Мы написали уже с десяток задач под разные окружения, но не собираемся же каждый раз вбивать все их руками. Не для этого же придуманы инструменты сборки. Нет, нам понадобятся всего две задачи, gulp develop и gulp production, которые сами разберутся, какие задачи нам нужно выполнить для нужного окружения. Привожу сразу код и все встанет на свои места.

Все! По запуску одной команды мы сгенерируем все нужные файлы для разработки или деплоя на продакшен. В режиме development нам достаточно только препроцессить html и собрать стили. В production делаем все — и препроцессинг, и стили, собираем модули requirejs в один файл, еще и копируем библиотечку require, а также оптимизируем изображения и склеиваем и копируем файлы scripts.

Топ-пост этого месяца:  WordPress.com запустил новый виджет для перевода контента

gulp-sync — запускаем задачи синхронно

Это небольшое отступление от темы. Мы только что написали задачи develop и production, которые запускают множество мелких задач. Природа gulp-a такова, что в таких случаях все задачи запускаются асинхронно. И это здорово, положительно сказывается на скорости работы, если бы не одно но.

Есть задачи, которые должны выполняться только последовательно. В нашем случае, в первую очередь должна отработать очистка предыдущих результатов, и только потом запускаться все остальные таски. gulp умеет делать это нативными средствами, но не очень удобочитаемыми, поэтому воспользуемся сторонним плагином gulp-sync.
npm install gulp-sync —save-dev
И поправим код gulpfile-a

Немного поправили задачи develop и production. И теперь мы уверены, что clean не очистит нам уже возможно сгенерированные другими задачами файлы.

gulp-watch — собираем в режиме онлайн

Написанные задачи отлично подходят для запуска сборки в режиме production. Но для разработки все же чего-то не хватает, а именно. Когда мы поменяем пару строк в sass-файлах или в index.html, нам придется запускать gulp sass:dev, gulp html:dev или gulp develop. Каждый раз врукопашную это делать совсем не интересно. Для этой рутинной работы существует замечательный плагин gulp-watch. Он следит за изменяемыми нами файлами и автоматически запускает нужные задачи сборки. Посмотрим, как это работает.

npm install gulp-watch —save-dev
Правим код

Казалось бы, сложная задача, которая сэкономит нам уйму времени, но так легко и быстро настраивается. Всего лишь указали, за какими файлами мы хотим следить и какие задачи запускать при их изменении. Обратите внимание, мы добавили задачу watch в develop. Теперь gulp develop не только соберет стили и html для разработки, но и запустить задачу их автоматической пересборки — отлично!

Для проверки запускаем gulp develop и пробуем редактировать, например, sass-файлы. В терминале сразу увидите, как gulp реагирует на Ваши действия и запускает задачу sass. То же самое и с html. Параллельно проверяте содержимое src/styles/main.css и src/index.html и убеждайтесь, что их содержимое меняется.

browser-sync — запуск локального веб-сервера

И напоследок рассмотрим очень крутую штуку, легко позволяющую поднять локально веб-сервер. Я упоминал, что для проверки работы Вам нужно было настроить apache или nginx, или запустить сервер средствами IDE, или заливать файлы на хостинг. С помощью этого плагина наш проект становится совершенно самодостаточным. Всего лишь одна команда позволит запустить проект в нужном режиме, development или production. То есть из двух разных папок, src или build. Давайте поставим плагин и проверим на примере.
npm install browser-sync —save-dev

Мы создали конфиги для веб-сервера, указав разные корневые папки и порты, а также написали собственно задачи для запуска webserver:dev и webserver:prod. webserver:dev мы еще добавили в задачу develop. Проверим, что из этого получилось.

Запустите теперь gulp develop и немного подождите. У Вас откроется браузер, где в новой вкладке по адресу http://localhost:9001 откроется наш проект, запущенный из папки src. Откройте консоль и убедитесь, что это действительно режим разработки: стили и скрипты не сжаты, 3 файла scripts не загружены, для стилей есть sourcemaps. При этом в фоне работает watch, и если Вы поменяете стили, то переключившись в браузер и обновив страницу, Вы сразу увидите сделанные обновления. Просто отлично!

Получается, теперь все что нам нужно, чтобы начать работать — это запустить gulp develop. Остальное все сделается за нас: очистятся результаты предыдущей сборки, соберутся стили и html, запустится наблюдатель watch и веб-сервер. Да еще и откроется браузер с запущенным проектом.

В режим production я не стал включать webserver:prod — мы собираем для продакшена не чтобы запустить браузер, а чтобы собрать файлы и залить их на боевой сайт. Но убедиться, что все собрано правильно и корректно работает, смысл имеет. Сделайте сначала gulp production, а затем gulp webserver:prod. Проект из папки build запустится с адресом http://localhost:9001.

Открыв dev tools, Вы легко проверите, что подключились именно продакшеновские файлы, сжатые стили и скрипты, никаких sourcemaps. Также заметите 3 отдельных js-файла из папки scripts, которые сыпят в консоль сообщения ‘init что-то там’.

Дополнение: browserSync.reload

Грамотный человек в комментариях (Dima) напоминает про одну замечательную вещь: browserSync.reload. Иными словами, liveReload, живая перезагрузка. Настроив ее, нам больше не придется обновлять страницу в браузере руками, после правки кода она перезагрузится сама. И сделать это очень просто.

Допустим, мы хотим обновлять страницу при изменении html, стилей, javascript-кода и шаблонов в папке tpl. Конечно, только в режиме develop. Для этого в таски html:dev и sass:dev нужно дописать одну строчку — .pipe(browserSync.reload())

Для js-кода и шаблонов делаем чуть по-другому. Добавим пути к отслеживаемым файлам в конфиг path.watch и одну строку в watch-таску

Перезапускайте gulp develop и пробуйте редактировать код, страница обновляется, кодить стало намного приятнее.

browserSync tunnel

Хочется упомянуть еще об одной небольшой детали насчет browserSync. Откройте терминал и увидите примерно такую картину Обратите внимание на строку
Tunnel: http://pjwhpjlsom.localtunnel.me
Она означает, что прямо сейчас Ваш проект доступен по этой ссылке извне. Можно отправить ее коллеге-программисту или дизайнеру. Конечно, это работает только до тех пор, пока у Вас запущен веб-сервер. При следующем запуске адрес поменяется: удобно и безопасно.

Выводы, исходники проекта и нужные ссылки

На этом пока все, что я хотел рассказать о сборке фронтенда с помощью gulp. Статья получилась объемной, много кода, но и написали мы немало самых разных задач. Материал получился очень сжатым, но подробный рассказ о рассмотренных плагинах и вариантах сборки мог бы растянуться на десяток статей.

Моей главной целью было заинтересовать читателей, мало знакомых с инструментами и принципами сборки. Я постарался показать реальные задачи, которые возникают при сборке практически любого проекта, даже самого простого. Мы создали и настроили gulp так, что теперь можно использовать только 2 команды для всей работы и сколь угодно расширять проект, не заботясь о рутинных операциях.

gulp, как, например, и git, относится к таким инструментам, без которых в принципе можно обойтись. Код они за нас не напишут. Но после знакомства с ними ты уже не можешь представить, как жил и работал до этого. Они становятся настолько привычными, что любой проект ты начинаешь с создания репозитория и настройки сборки. И только когда все подготовительные операции пройдены, ты со спокойной душой начинаешь заниматься программированием.

Исходники проекта доступны по этой ссылке. Желаю удачной сборки и отличных проектов! Вопросы, пожелания и критику оставляйте в комментариях.

Пример верстки на флексах с использованием gulp и less.

Разработку любого сайта следует начинать с настройки инструментов.

Рассмотрим инструменты и подготовим их к работе.

Все материалы я буду добавлять сюда: https://github.com/pikaweb

Для работы с репозиториями нам пригодится GitBash. Скачать его можно отсюда:

В качестве локального сервера я использую OpenServer:

Кроме того понадобится установить node.js

Перейдем к подготовке. Создаем каталог в \Ваш путь\OpenServer\domains\

Запускаем OpenServer. Входим в его настройки, вкладка «Домены» и добавляем домен для созданной ранее папке. Запускаем сервер.

Теперь сайт будет доступен при вводе в браузере http://domain-name/

Настраиваем git (если еще не настроен). Я предпочитаю bitbucket т.к. он предоставляет бесплатные приватные репозитории. Ниже ссылки на github и bitbucked и на материал по настройке подключения сразу к обоим:

Переходим к созданию git репозитория.

Добавление проекта в репозиторий:

Подробный tutorial по bitbucket:

Настроив репозитории, перейдем к настройке gulp для проекта. Для начала его нужно установить (необходим установленный node.js). Перейдя в терминале (можно и gibush, можно любой удобный для вас) в каталог с сайтом, выполняем следующую команду:

Вводим имя проекта, его версию, описание, ключевые слова и.т.д. Это создаст файл package.json, который будет хранить информацию о подключаемых нами пакетах. Теперь установим gulp и нужные для него расширения.

npm install gulp —save-dev

—save-dev обозначает, что мы сохраним информацию об установке пакета в package.json. Это нужно, чтобы не хранить в репозитории подгружаемые npm файлы для установленных модулей. Все они содержатся в node_modules. Чтобы node_modules не отправлялись на git, создадим файл .gitignore со следующим содержимым:

А теперь продолжим устанавливать модули для gulp:

Модуль gulp-concat для конкатенации файлов:

npm install gulp-concat —save-dev

Модуль gulp-less для построения css файлов на основе less. Про это чуть подробней при верстке проекта.

npm install gulp-less —save-dev

Для less еще пригодятся less-plugin-clean-css (пост обработка и сжатие less файла) и less-plugin-autoprefix (автоматическое добавление вендорных префиксов, согласно базе данных caniuse.com)

npm install less-plugin-clean-css —save-dev

npm install less-plugin-autoprefix —save-dev

Для сжатия css файлов добавим gulp-minify-css

npm install gulp-minify-css —save-dev

Часть css я встраиваю в html, поэтому добавим gulp-inline-source

npm install gulp-inline-source —save-dev

Для удаления комментариев из html файла понадобится.

npm install —save-dev gulp-remove-html-comments

Для очистки файла от лишних пробелов и удаления комментариев из html файла понадобится:

npm install gulp-htmlclean —save-dev

Для него требуется jquery

npm install slick-carousel –save-dev

npm install jquery —save-dev

Для верстки еще полезно подключить normalize.css или reset.css. Я обычно использую normalize.

npm install normalize.css —save-dev

Почитать про него можно тут:

Продумаем общую структуру проекта

Где в public будет собираться проект.

Для настройки gulp следует создать файл gulpfile.js и подключить в нем все установленные плагины:

var gulp = require(‘gulp’)

var less = require(‘gulp-less’);

var minifyCSS = require(‘gulp-minify-css’);

var inlinesource = require(‘gulp-inline-source’);

var LessPluginCleanCSS = require(‘less-plugin-clean-css’),

cleancss = new LessPluginCleanCSS(< advanced: true >),

var htmlclean = require(‘gulp-htmlclean’);

var concat = require(‘gulp-concat’);

var uglify = require(‘gulp-uglify’);

//generate css from less ( + slick less files + slick files).

return gulp.src([‘./assets/less/*.less’, ‘node_modules/slick-carousel/slick/slick.less’, ‘node_modules/slick-carousel/slick/slick-theme.less’])

plugins: [autoprefix, cleancss]

//move images to public

//inline link, script and img in index.html . Clean html.


return gulp.src([‘node_modules/jquery/dist/jquery.min.js’,’node_modules/slick-carousel/slick/slick.min.js’, ‘assets/js/*.js’])

gulp.task(‘default’, [‘less-to-css’,’index’, ‘slickJs’]);

Запуск gulp осуществляется из консоли. Открыв консоль в каталоге с проектом и введя gulp, мы запустим выполнения задачи default, которая в свою очередь выполнит задачи ‘less-to-css’,’index’, ‘slickJs’. За счет gulp.watch, после любого изменения less файлов или index.html файла будет выполняться соответствующая задача.

Для примера верстки макета я выбрал .psd макет, распространяемый свободно как для некоммерческого, так и для коммерческого использования.

Ссылка на макет:

Из плюсов, к нему сразу прилагаются шрифты и макет демонстрирующий отображение на мобильном устройстве.

Обычно первым делом я формирую общую схему разметки. Получается нечто подобное:

В дальнейшем в разметке я буду придерживаться BEM методологии. Почитать про неё можно здесь:

Далее согласно этой методологии размечаю всю страницу.

Оптимизация загрузки шрифтов.

К данному макету шрифты шли в каталоге /fonts.

Для оптимизации работы со шрифтами воспользуемся fontsquirrel и возможностью хранить до 5мб места в localstorage. Подробней можно прочитать в переводах статей Adam Beres-Deak:

Верстал преимущественно флексами, про них можно почитать по ссылкам:

Ссылка на кросс-браузерный вариант реализации filter.

Полностью выкладывать в пост файлы проекта я не буду. Они выложены в гит аккаунте сообщества:

Посмотреть на результат в git pages:

Чтобы отправить каталог public В новую ветвь для git pages следует выполнить следующую команду:

git subtree push —prefix public origin gh-pages

Если у кого-нибудь будут проекты, которые вы хотите выложить в репозиторий сообщества – пишите. Создам репозиторий и поделюсь доступом.

Дубликаты не найдены

Большое спасибо за пример.
А есть ли что-то еще на флексах с БЭМ, less, gulp и psd макетом? Аналогичное, но более сложное. Возможно с использованием flex-grow/flex-shrink.
Если да, выложите на гитхаб пожалуйста, буду очень благодарен.

На днях думал перевести и выложить перевод этой статьи:

Хороший хак по flex.

Примеров, чтобы сразу показать нет. Если найдете небольшой макет со сложным элементом — могу его сверстать флексами и показать.

а вы можете рассмотреть вариант побыть тьютором?
на один макет средней сложности, помочь с флексами и js.
если да, то как можно связаться, уточнить условия и прочие подробности?

Я не против побыть тьютором, у меня уже есть опыт в этом. Оставьте свой e-mail/skype/vk или любой другой контакт и я вам напишу.

Народ, подскажите пожалуйста, т.к. с версткой особо не дружу, хотя с css3 немного знаком. Я так понимаю PostCss и Scss это препроцессоры css, облегчающие верстку, а что из них лучше учить на данный момент?

С PostCSS лично не знаком, но опираюсь на то, что Bootstrap v4 и Foundation используют именно SASS/SCSS именно как платформу для своих фреймворков.

Почему less, а не sass?

Зачем OpenServer? Где livereload? Почему не используешь плагин для оптимизации изображений?

Чем less-plugin-autoprefix отличается от gulp-autoprefixier?

1. less и scss сопостовимы по возможностям. Точнее scss несколько мощнее, но для данной задачи принципиальной разницы не будет. Мне так привычней, поэтому использовал его.

2. Openserver я использую как локальный сервер. Давно им пользуюсь, удобно стрктурированны прошлые проекты. Для данной задачи он действительно не обязателен. Можно конечно обойтись сервером из npm.

3. На gulp перешел недавно, livereload еще не использовал. Судя по тому, что о нем читал — удобно.

4. Изображения пожал на этапе нарезки макета при помощи FileOptimizer. Какой из плагинов под gulp рекомендуете?

5. less-plugin-autoprefixer — это плагин для gulp-less. Выбрал его т.к. ориентировался на список плагинов с сайта less http://lesscss.org/usage/#plugins

Если есть рекомендации, как улучшить верстку или настройки — с удовольствием почитаю. Особенно если с пояснениями о преимуществах другого подхода.

Gulp. Урок 3. Подключение плагинов. Сборка less файлов

The options you can use can be found here. Below is a list of valid options as of the time of writing:

  • paths : Array of paths to be used for @import directives
  • plugins : Array of less plugins (details)

The filename option is not necessary, it’s handled automatically by this plugin. The compress option is not supported — if you are trying to minify your css, use a css minifier. No sourceMap options are supported — if you are trying to generate sourcemaps, use gulp-sourcemaps.

Less now supports plugins, which can add additional functionality. Here’s an example of how to use a plugin with gulp-less .

More info on LESS plugins can be found at http://lesscss.org/usage/#plugins, including a current list of all available plugins.

gulp-less can be used in tandem with gulp-sourcemaps to generate source maps for your files. You will need to initialize gulp-sourcemaps prior to running the gulp-less compiler and write the source maps after, as such:

By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a relative file path in the sourcemaps.write() function, as such:

By default, a gulp task will fail and all streams will halt when an error happens. To change this behavior check out the error handling documentation here

Copyright (c) 2015 Plus 3 Network dev@plus3network.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Топ-пост этого месяца:  Урок 4. Препроцессор Sass. Импорты и фрагментация

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Gulp файл и сборка CSS

Что такое Gulp, и зачем он нужен? При верстке сайтов, возникает много рутинных задач:

  • компиляция SASS/LESS файлов
  • работа с шаблонизаторами
  • проставление префиксов
  • оптимизация изображений
  • сжатие и склейка файлов

Представьте, что вы сверстали сайт и на этом работа ещё далеко не закончилась. Дальше вы открываете массу сервисов, генераторов, компиляторов и вручную начинаете дорабатывать ваш сайт. Трата драгоценного времени, на повторяющиеся действия из проекта в проект — непозволительная роскошь.

Наверняка вас посещала такая мысль: «Как бы это все это автоматизировать». А все уже давно придумано за нас, только бери и пользуйся. В народе называют его сборщиком проектов – Gulp, а по сути – это исполнитель задач (task-runner).

Кстати, как у вас обстоит дело с JavaScript? При работе с Gulp файлом, вам придется с ним подружиться, но ненадолго. Как правило, файл с Gulp тасками (task), создается один раз и копируется из проекта в проект.

На этом уроке мы рассмотрим, как создать gulp task для сборки CSS файла. На компьютере должен быть установлены node.js.

Задача: Пишем стили в SASS, а на выходе получаем простой и минифицированный CSS файл с проставленными префиксами.

Gulp проект

Создаем папку my-gulp с файлом package.json. Пишем информацию о проекте.

<
«name»: «my-gulp»,
«version»: «1.0.0»,
«description»: «gulp4»,
«author»: «дядя Вася»,
>

Устанавливаем Gulp, через командную строку:

npm i -–save-dev gulp

В папке с проектом появилась папка node_modules, на неё не обращайте никакого внимания.

Создадим в проекте:

  • gulpfile.js
  • две папки src, dist
  • style.scss

Gulp плагины

Установим плагины, поочередно вводя в командную строку:

// компилирует SASS в CSS
npm i gulp-sass —save-dev

// проставляет префиксы
npm i gulp-autoprefixer —save-dev

// делает красивый CSS код
npm i gulp-cssbeautify —save-dev

// сжимает CSS файл
npm i gulp-cssnano —save-dev

// удаляет комментарии
npm i gulp-strip-css-comments —save-dev

// добавляет суффикс min к сжатой версии
npm i gulp-rename —save-dev

Дословно: Инсталлировать gulp модули из пакетного менеджера и сохранить зависимости в package.json.

Пример Gulp файла для сборки CSS

// подключаем gulp
const gulp = require («gulp»);

// создадим две переменные, отвечающие за чтение исходных файлов (src) и запись сгенерированных файлов (dest).
const = require («gulp»);

// передаем модули в переменные
const autoprefixer = require («gulp-autoprefixer»);
const cssbeautify = require («gulp-cssbeautify»);
const removeComments = require («gulp-strip-css-comments»);
const rename = require («gulp-rename»);
const sass = require («gulp-sass»);
const cssnano = require («gulp-cssnano»);

Мы пишем SASS код в файле style.scss, Gulp выполняет таски и складывает готовые style.css + style.min.css, в папку dist. Однако сам Gulp не знает, откуда брать и куда перемещать, надо указать пути.

Создадим объект path с двумя вложенными объектами. Готовый CSS код, будет перемещаться из папки src в папку dist.

Создаем Gulp task для CSS

В таске важно придерживаться логической последовательности. Получаем путь ко всем исходным SASS файлам. Метод pipe будет вызывать ранее установленные плагины, можно передавать параметры.

Компилируем SASS файлы в CSS

Расставляем префиксы в каскадном виде с учетом 8-ми последних версий браузеров.

function css () <
return src(path.src.css, )
.pipe(sass())
.pipe(autoprefixer( <
Browserslist: [‘last 8 versions’],
cascade: true
>))

Преобразует код к аккуратному виду. Перемещает готовый CSS код туда, куда мы указывали в путях. Удаляет пробелы, комментарии, создает два CSS файла, один из которых минифицированный. Делает экспорт.

.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano( <
zindex: false,
discardComments: <
removeAll: true
>
>))
.pipe(removeComments())
.pipe(rename( <
suffix: «.min»,
extname: «.css»
>))
.pipe(dest(path.build.css))
>
exports.css = css;

Помимо таска для сборки CSS, в gulpfile.js пишутся таски для html, js и изображений.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    плагин gulp less

    О сервисе MosCatalogue.net

    MosCatalogue.net — это сервис, который предоставляет вам возможность быстро, бесплатно и без регистрации скачать видео с YouTube в хорошем качестве. Вы можете скачать видео в форматах MP4 и 3GP, кроме того можно скачать видео любого типа.

    Ищите, смотрите, скачивайте видео — все это бесплатно и на большой скорости. Вы даже можете найти фильмы и скачать их. Результаты поиска можно сортировать, что упрощает поиск нужного видео.

    Скачать бесплатно можно фильмы, клипы, эпизоды, трейлеры, при этом вам не нужно посещать сам сайт Youtube.

    Скачивайте и смотрите океан бесконечного видео в хорошем качестве. Все бесплатно и без регистрации!

    Установка и использование Gulp

    Установка Gulp

    Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:

    Затем установите его в свой проект:

    Использование Gulp

    Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.

    Добавьте следующие команды в ваш файл gulpfile.js:

    Установите gulp-uglify через npm выполнив npm install —save-dev gulp-uglify , а затем запустите задачу через gulp minify . Предположим, у вас есть файл с именем app.js в папке js, новый app.js будет создан в папке build и содержать сжатую версию js/app.js.

    Что на самом деле здесь происходит?

    Мы делаем несколько вещей в нашем файле gulpfile.js. Вначале мы загружаем модули gulp и gulp-uglify:

    Затем определяем задачу с именем minify, которая при запуске вызывает функцию, заданную в качестве второго аргумента:

    В конце, и это самое сложное, мы определяем, что наша задача должна делать:

    Если вы не знакомы с потоками, а большинство фронтенд-разработчиков с ними не знакомы, то код выше ничего вам не скажет.

    Потоки

    Потоки позволяют пройти некоторым данным через ряд, как правило, небольших функций, которые модифицируют данные, а затем передают их следующей функции.

    В приведённом выше примере функция gulp.src() получает строку, которая соответствует файлу или набору файлов, и создаёт поток объектов представляющих эти файлы. Затем они переходят (или перетекают) в функцию uglify() , которая принимает объекты файлов и возвращает новые объекты файлов с минимизированным исходником. Этот результат затем перетекает в функцию gulp.dest() , которая сохраняет изменённые файлы.

    Вот что происходит в виде схемы:

    Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:

    Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.

    Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:

    Если вы знакомы с Grunt, то заметите, что это довольно сильно отличается от того, как работает Grunt. Grunt не использует потоки. Вместо этого он берёт файлы, запускает одну задачу для каждого файла и сохраняет в новые файлы, повторяя весь процесс для каждой задачи. В результате множества обращений к файловой системе, Grunt работает медленнее, чем Gulp.

    Для лучшего понимания потоков прочтите Stream Handbook.

    gulp.src()

    Функция gulp.src() берёт один или несколько файлов или массив и возвращает поток, который может быть передан в плагины.

    Gulp использует node-glob для получения указанных файлов. Проще всего объяснить на примерах:

    • js/app.js
      Соответствует определённому файлу.
    • js/*.js
      Соответствует всем файлам, заканчивающихся на .js в папке js.
    • js/**/*.js
      Соответствует всем файлам с расширением .js в папке js и всех вложенных папках.
    • !js/app.js
      Исключает js/app.js из соответствия, что полезно если вы желаете выбрать все файлы в папке за исключением определённого файла.
    • *.+(js|css)
      Соответствует всем файлам, заканчивающихся на .js или .css.

    Другие функции также доступны, но в Gulp они обычно не применяются. Посмотрите документацию Minimatch ради подробностей.

    Предположим, у нас есть папка с именем js, содержащая файлы JavaScript, некоторые минимизированы, а некоторые нет. Мы хотим создать задачу по минимизации ещё не уменьшенных файлов. Чтобы сделать это, мы выбираем все файлы JavaScript в папке, за исключением всех файлов, оканчивающиеся на .min.js:

    Определение задач

    Чтобы определить задачу используйте функцию gulp.task() . Для простой задачи эта функция принимает два параметра: имя задачи и функция для запуска.

    Запуск gulp greet выведет «Здравствуй, мир» в консоли.

    Задача также может быть списком других задач. Предположим, мы хотим определить задачу build, которая выполняет три других задачи: css, js и imgs. Мы можем сделать это, указав вместо функции массив с задачами:

    Они будут запускаться асинхронно, так что вы не можете предполагать, что когда задача css завершится, то запустится задача js — на деле, это, скорее всего, не произойдёт. Чтобы убедиться, что задача завершила работу перед запуском другой задачи, вы можете указать зависимостей путём объединени массива задач с функцией. Например, чтобы определить задачу css, которая перед запуском проверит, что задача greet завершена, вы можете сделать так:

    Теперь, когда вы запустите задачу css, Gulp выполнит задачу greet, подождёт, пока она окончится, а затем вызовет указанную функцию.

    Задача по умолчанию

    Вы можете определить задачу default, которая выполняется, когда вы просто запускаете gulp. Вы можете сделать это, определив задачу с именем default.

    Плагины

    Вместе с Gulp вы можете использовать ряд плагинов — более 600 на деле. Вы найдёте их список на странице плагинов, либо путём поиска gulpplugin в npm. Некоторые плагины помечены «gulpfriendly»; это не плагины, но они предназначены для работы с Gulp. Учтите, что при поиске непосредственно в npm, вы не увидите плагины из чёрного списка (прокрутите страницу с плагинами вниз и увидите больше).

    Большинство плагинов довольно просты в использовании, имеют хорошую документацию и запускаются аналогичным образом (через поток файловых объектов). Они, как правило, модифицируют файлы (хотя некоторые, вроде валидаторов, нет) и возвращают новые файлы, которые передаются в следующий плагин.

    Давайте расширим уже упомянутую задачу js:

    Мы используем три плагина: gulp-jshint, gulp-uglify и gulp-concat. Вы можете увидеть в файлах README для плагинов, что их довольно легко использовать. Доступны некоторые настройки, но по умолчанию, как правило, всё хорошо.

    Вы, возможно, заметили, что плагин JSHint вызывается дважды. Потому что первая строка вызывает JSHint для файлов, которые только присоединяют свойство jshint к файловым объектам без какого-либо вывода. Вы можете прочитать свойство jshint самостоятельно или передать его в jshint.reporter по умолчанию или в другой reporter , такой как jshint-stylish.

    Два других плагина понятнее: функция uglify() минимизирует код, а функция concat(‘app.js’) объединяет все файлы в один с именем app.js.

    gulp-load-plugin

    Модуль, который я нахожу весьма полезным называется gulp-load-plugins, он автоматически загружает любые плагины Gulp из файла package.json и присоединяет их к объекту. Основное применение следующее:

    Вы можете записать всё в одну строку ( var plugins = require(‘gulp-load-plugins’)(); ), но я не большой поклонник однострочного вызова require.

    После запуска этого кода объект plugins будет содержать ваши плагины с именами в CamelCase-стиле (к примеру, gulp-ruby-sass будет загружен как plugins.rubySass ). Вы можете использовать их обычным путём. Например, наша задача js сократится так:

    К этому прилагается файл package.json, который содержит нечто похожее:

    Данный пример на самом деле не намного короче. Однако для объёмных и сложных Gulp-файлов, это сократит блок с загрузкой файлов до одной или двух строк.

    Версия 0.4.0 gulp-load-plugins выпущенная в начале марта добавила отложенную загрузку плагина, которая улучшает производительность. Плагины не загружаются, пока их не вызовем, это значит, что вам не придётся беспокоиться о неиспользованных плагинах в package.json влияющих на производительность (хотя их, вероятно, следует убрать в любом случае). Другими словами, если вы запустите задачу, которая требует только два плагина, она не станет загружать все плагины, которые необходимы для других задач.

    Отслеживание файлов

    Gulp имеет возможность следить за изменением файлов и выполнять задачу или задачи при обнаружении изменений. Эта функция удивительно полезна (для меня, наверное, одна из самых полезных в Gulp). Вы можете сохранить Less-файл, а Gulp превратит его в CSS и обновит браузер без каких-либо действий с вашей стороны.

    Для слежения за файлом или файлами используйте функцию gulp.watch() , которая принимает шаблон файлов или их массив (такой как gulp.src() ), либо массив задач для их запуска или выполнения функции обратного вызова.

    Предположим, что у нас есть задача build, она превращает наши файлы шаблонов в HTML и мы хотим определить задачу watch, которая отслеживает изменение шаблонов и запускает задачу для преобразования их в HTML. Мы можем использовать функцию watch следующим образом:

    Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.

    Вы также можете указать для watch функцию обратного вызова вместо массива задач. В этом случае функция получает объект event содержащий информацию о событии, которое вызвало функцию:

    Другой отличительной особенностью gulp.watch() является то, что она возвращает watcher . Используйте его для прослушивания дополнительных событий или для добавления файлов в watch. Например, чтобы одновременно запустить список задач и вызвать функцию, вы можете добавить слушателя в событие change при возвращении watcher :

    В дополнение к событию change вы можете прослушивать ряд других событий:

    • end
      Срабатывает, когда watcher завершается (это означает, что задачи и функции обратного вызова не будут больше вызываться при изменении файлов).
    • error
      Срабатывает, когда происходит ошибка.
    • ready
      Срабатывает, когда файлы были найдены и готовы к отслеживанию.
    • nomatch
      Срабатывает, когда запросу не соответствует ни один файл.

    Объект watcher также содержит некоторые методы, которые можно вызывать:

    Добавить комментарий