Сборка проекта gulp: Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки / Хабр

Содержание

Современная сборка 2020 для frontend. Gulp4

Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.

Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации scss, минификации javascript и других рутинных задач. Самое забавное — когда сделали мелкую правку, снова нужно проходить все круги ада копипаста.

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



Gulp

Начнем с главного в нашей сборке.

Gulp — это наш фундамент, потому что он будет управлять всеми нашими задачами, другими словами, taskmanager. Концепция задач очень проста. Название асинхронной javascript функции равно названию задачи, и работает она по принципу: берет данные, трансформирует их и записывает результат.


Пример минификации сss

Как видим, все просто: называем нашу задачу css, вызываем функцию src, которая берет данные по определенному шаблону и передает данные по трубе (функция pipe()). Внутри pipe вызываем функцию плагина, которая трансформирует наши данные и результат передает функцию dest. dest — записывает результат по указанному пути.

С pipe можно выстраивать любые цепочки.


Пример

В четвертой версии много чего изменилось, но на что нужно точно обратить внимание — это на gulp.series() и gulp.parallel(). Позже мы разберем параллельное выполнение задач.

Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task():

gulp.task('taskName',function() {
    //do somethings
})

Больше не рекомендуется использовать gulp.task().

Экспортирование функций позволяет разделять на публичные и приватные задачи.


  • публичные задачи — экспортируются из вашего gulpfile, что позволяет запускать их командой gulp.
  • приватные задачи — создаются для внутреннего использования, как правило, в составе series() или parallel()

Пару слов о шаблонах поиска файлов в функции src.


  • templates/*.html
    — ищет файлы с расширением html в папке templates
  • templates/**/*.html — ищет файлы с расширением html во всех папках, которые в templates

Более подробная информация здесь, здесь и здесь.


После того, как мы разобрались с фундаментом нашего проекта, начнем делать первые шаги. Проверяем, установлены ли node.js и npm.


Команды в консоли

Если они не установлены, следуйте инструкциям здесь.

Создаем папку для нашего проекта. Внутри инициализируем npm npm init --yes
Ключ --yes означает автоматические ответы вопрос по проекту.

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


  • build — оптимизированные файлы для использования на сервере
  • src — рабочая папка, где будут храниться все наши исходники
  • gulp — здесь будут храниться наши tasks

Еще добавим файл .gitignore, чтобы системные файлы не попадали в репозиторий.
Папка /build задокументирована, потому что часто использую GitHub Pages для демонстрации работы.

Не забудьте установить gulp: npm install --save-dev gulp


.gitignore
# Файлы и папки операционной системы
.DS_Store
Thumbs.db

# Файлы редактора
.idea
*.sublime*
.vscode

# Вспомогательные файлы
*.log*
node_modules/

# Папка с собранными файлами проекта
# build/


HTML

У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.


Пример немного не реалистичный, но почти такое делают

Все наши проблемы решает Pug. Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют.


Пример базового функционала

Новичкам советую обратить внимание еще на несколько возможностей:


  • Разделение на модули — удобно, когда используешь БЭМ: один блок — один файл. Подробнее.

Пример из документации


  • Миксины — удобно использовать для однотипных блоков. Например, карточки товаров или комментариев. Подробнее.

Пример с документации



Пример с документации

За последнее время сильно ничего не изменилось, только название с Jade на Pug. Подробнее.


Разделяем HTML

На нашем сайте будут две тестовые страницы about и index. Структура на страницах повторяется: есть блоки

<footer>, <header>, <head>. Поэтому все нужно вынести в отдельные файлы модули.


Структура проекта

Разберем все более подробно.


  • pages — папка для наших страниц, где в корне хранятся непосредственно страницы
  • common — хранятся общие блоки для всех страниц
  • includes — хранятся модули страниц, где внутри еще одна папка, которая соответствует названию страницы

Пройдемся по файлам:


  • layout.pug — шаблон, который хранит основную структуру, и от него наследуются все другие страницы

layout.pug


  • index.pug и about.pug — наши страницы, которые наследуются от шаблона и подключают свои контентные модули

pages/index.pug и pages/about.pug

Еще, обратите внимание, у

pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.


Установим плагин gulp-pug для компиляции наших шаблонов. Выполните в консоли команду: npm i gulp-pug
Создадим файл pug2html.js в папке gulp/tasks.


pug2html.js

Здесь все понятно: ищем файлы по указанному пути, компилируем и результат выгружаем в папку build. Еще добавим pug-linter, чтобы новички не косячили и сохраняли единый стиль написания кода. Для конфигурации создадим файл .pug-lint.json в корне проекта. Правила для линтера писал на свой вкус. Вы без проблем сможете изменить. Список правил.

Теперь подключаем нашу задачу в файле gulpfile.js.


gulpfile.js

Здесь мы создаем серию с одной таски с названием start; потом мы добавим ещё. Теперь в консоли выполните команду gulp start

, и в папке build должны появиться два файла: index.html и about.html.

Еще добавим gulp-w3c-html-validator, чтобы не было нелепых ошибок. Вы, наверное, догадались, что порядок подключения плагинов c помощью pipe() очень важен. То есть перед тем, как вызвать плагин pug() для компиляции, нужно сделать валидацию плагином pugLinter(), а плагин gulp-w3c-html-validator подключаем после pug(), потому что нам нужно валидировать скомпилированный html.

Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.


Пример работы плагина


Финальный код таски pug2html.js


Для стилей мы будем использовать Scss. Все дается по аналогии с задачей pug2html. Создаем новую папку

styles и скачиваем нужные пакеты npm install node-sass gulp-sass --save-dev.
Дальше пишем задачу, как и делали раньше. Берем файлы, передаем в плагин и потом сохраняем результат.


tasks/styles.js

Дальше мы добавим вспомогательные плагины: npm i gulp-autoprefixer gulp-shorthand gulp-clean-css gulp-sourcemaps stylelint gulp-stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-standard stylelint-config-htmlacademy

Пройдемся по каждому плагину:


  • gulp-autoprefixer — автоматическая расстановка префиксов для старых браузеров.
  • gulp-shorthand — сокращает стили.

Пример


Файлы styles:


Структура папки styles


global.scss


media.scss

Немного обсудим файл media.scss. Есть два варианта организации медиа-запросов.


  1. Писать медиа-запросы ко всему блоку в конце файла.
  2. Писать медиа-запросы в самом селекторе, используя @mixin и @include.

Пример второго варианта

Я поклонник второго варианта, удобно, когда все стили в одном месте, и не нужно никуда скроллить и ничего искать.

Последний шаг: подключим normalize.css. Установим командой npm install normalize.css
и добавим @import "../../../node_modules/normalize.css/normalize"; в начале файла global.scss
Зачем нужен normalize.css?


Все делаем так же, как и с другими тасками, только подключаем другие плагины.
Установим сначала все необходимые зависимости npm i gulp-babel @babel/core @babel/preset-env --save-dev
и зависимости для eslint npm install eslint eslint-config-htmlacademy eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node --save-dev



Пример


  • gulp-terser — минификация и оптимизация javascript.

Задача script


  • eslint — мы уже знаем, что делают линтеры. Решил подключить готовые конфиги, потому что очень много разных правил, чтобы все настраивать с нуля.

.eslintrc.json


Устанавливаем плагины npm i gulp-imageMinify gulp-svgstore
Для картинок используется банальный код, который вы уже на данном этапе без проблем можете понять.

Шрифты мы просто копируем.

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


Чтобы каждый раз не обновлять страницу при изменении файла, подключим browser-sync. У gulp есть встроенная функция, которая следит за изменениями и вызывает нужные нам функции. Советую зайти и почитать о возможностях browsersync. Мне очень нравится возможность открытия сайта и синхронизации прокрутки страницы на нескольких устройствах. Очень удобно верстать адаптивные сайты: открыл на компьютере, открыл на телефоне — и сразу видишь результат.


Наш локальный сервер. Задача serve

Бывает такое, что сделал опечатку, сохранил код и сборка падает с ошибкой. Нужно снова перезапускать сборку, и со временем это может начать раздражать, поэтому установим npm i gulp-plumber. Plumber будет перехватывать ошибки, и после устранения ошибки сборка восстановит работоспособность. Интегрировать его очень просто, добавляем его первым .pipe(plumber()) в наших трубопроводах цепочках pug2html и styles.

Во время разработки мы будем создавать и удалять файлы. Так как у нас live reload, то созданные файлы автоматически попадут в build. Когда чуть позже мы решим удалить файл, то он останется в папке build, поэтому сделаем еще одну задачу clean, которая будет удалять папку. Установим плагин npm install del. Del.

const del = require('del')

module.exports = function clean(cb) {
  return del('build').then(() => {
    cb()
  })
}

Главное — не забыть вызвать функцию-callback, которая сообщит gulp, что задача выполнена.


Lighthouse


Lighthouse — решение для веб-приложений и веб-страниц, которое собирает современные показатели производительности.

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

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


Скрин с реального проекта

Устанавливаем npm i --save-dev gulp-connect lighthouse chrome-launcher и создаём задачу.
Результат для каждой странички будет генерироваться в папку ./reports. Там будут ‘html’ файлы, они открываются автоматически, но вы сами в любой момент можете их открыть и посмотреть результат.

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


lighthouse.js

Кода многовато, но он простой. Запустили наш локальный сервер с помощью browser-sync, потом хром и в конце lighthouse, где говорим, по какому url искать наш сайт.


В нашей команде есть правило, что все dependencies нужно загружать в репозиторий. Это было связано с тем, что иногда может пропасть интернет в стране. Вручную скачивать пакеты с сайтов и загружать их в папку не очень удобно, ещё сложно следить за версиями пакетов, и каждый раз из node_modules обновлять также не очень удобно, поэтому мы должны оптимизировать этот процесс.

gulp-npm-dist — очень хороший плагин, мне он нравится тем, что он не просто копирует всю папку модуля, а только нужные файлы. README.md, LICENSE, .gitignore и другие конфигурационные файлы не копируются.

Теперь сделаем, чтобы при изменении package.json вызывался плагин. Не вижу смысла сильно заморачиваться и следить только за изменениями объекта dependencies, поэтому будем просто следить за файлом.


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

Рассмотрим такую ситуацию: вы скопировали большой кусок кода с постороннего ресурса, и
он не соответствует вашим правилам форматирования.
Не будете же вы всё править руками? Можно просто в консоли ввести команду, которая все исправит
за вас stylelint ./src/styles/**/*.scss --fix --syntax scss, команда длинная, поэтому запишем ее в NPM-скрипт


Добавили NPM-скрипт

Как видим на скрине, теперь в консоли можно вводить npm run stylelint-fix.

Напишем еще несколько команд:


  • npm run start — вместо gulp, привык, что любой проект у меня запускается этой командой
  • npm run build — вместо gulp build, такая же ситуация, как в прошлом пункте
  • npm run lighthouse — вместо gulp build && gulp lighthouse, сначала собираем проект, а потом уже тестируем
  • npm run test — запуск разных линтеров, хорошей практикой будет запускать перед комитом

Не верю я, что вы будете перед комитом запускать npm run test, даже не верю, что я буду. Поэтому скачаем husky и добавим:

"husky": {
    "hooks": {
      "pre-commit": "npm run test"
    }
  }

в package.json. Если npm run test вернет ошибку, то комит не будет сделан.


Очень приятно, если вы прочли всю статью и сумели принять мои мысли. Отвечу на вопросы в комментариях и жду ваших pull requests и issue. Всем приятных сборок.

Ссылка на репозиторий с тем, что у нас получилось: github.

сборка проекта с Gulp – Dev notes

Gulp это система потоковой сборки проектов на JavaScript. При помощи этого инструмента можно автоматизировать рутинные задачи в web разработке. Какие именно? Например проверку js файлов на наличие ошибок, или потенциальных ошибок, минификацию js, css, компиляцию scss в css и тд..

Попробуем решить небольшую задачу, на примере которой можно увидеть всю прелесть gulp’а..

И так, будем проверять js файлы на наличие ошибок jshint’ом, сжимать js файлы, компилировать scss файлы в css, сжимать css файлы. Поехали..

Установка

Для установки gulp нам понадобится установленный npm — менеджер пакетов для nodejs (ставится автоматически при установке nodejs).

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

npm install gulp -g

mkdir gulp && cd $_

npm install gulp

Проверяем

Для поставленной задачи нам также понадобятся плагины:

  • gulp-cssmin — минификатор для css файлов
  • gulp-uglify — минификатор для js файлов
  • gulp-jshint — инструмент для проверки js файлов на ошибки
  • jshint-stylish — красивый репортер для jshint
  • gulp-rename — переименовывание файлов
  • gulp-sass — компиляция scss файлов в css

Устанавливаем

npm install gulp-cssmin gulp-uglify gulp-jshint jshint-stylish gulp-rename gulp-sass

В корне нашего проекта появилась директория node_modules, которая содержит в себе все установленные плагины для gulp и сам gulp

Далее создадим структуру нашего проекта как показано на скриншоте

gulpfile.js — конфигурационный файл для gulp, пока пустой. В директории assets будут лежать все наши js, css, scss файлы. Создаем только main.js и main.scss файлы, минифицированные файлы gulp будет создавать сам. В index.html подключаем будущие минифицированные файлы main.min.css и main.min.js

Содержимое файла index.html

Создание конфигурационного файла

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

Проверим что получилось. В терминале:

Видим что gulp создал файлы, которых не было изначально

Что произошло.. gulp нашел main.js файл, создал минифицированную версию с приставкой .min, нашел main.scss файл, скомпилировал его в css и создал минифицированную версию с приставкой .min

Задача выполнена, разберем подробней что происходит в нашем gulpfile.js

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

Так выглядит описание типичной задачи. Тут мы видим, что последовательность действий связанна через метод .pipe(), который передает поток данных по цепочке.

Рассмотрим основные методы gulp API:

  • .task() — определяет задачу
  • .src(glob) — принимает glob для обработки и возвращает входящий поток
  • .dest(dest) — принимает путь к файлу и возвращает исходящий поток
  • .run(tasks) — запускает задачу (deprecated)
  • .watch(glob) — отслеживает изменения в файлах

По-умолчанию (если в терминале вызвать комманду gulp) запускается задача default, мы можем запустить конкретную описанную в gulpfile.js задачу

Что происходит дальше в нашем gulpfile.js:

запускается задача default, которая запускает задачи jshint, js-minifier, sass-compile и watch

задача watch отслеживает изменения в файлах и выполняет соответствующие задачи, если файлы изменились

задача jshint проверяет js файлы на ошибки и в случае, если такие обнаружены, возвращает ошибку в терминал

задача js-minifier минифицирует js файлы

задача sass-compile компилирует scss файлы в css файлы. Тут есть одна отличительная особенность в коде. Дело в том, что метод .watch() в gulp API лишь следит за изменениями в файлах, и не сработает, если файл создается в процессе.. Мы же создаем css файл на основе scss и минифицируем его. Обычным способом задача минификации не вызовется, так как изменений в самом css файле не было, он создавался в процессе. Обойти этот неудобный момент поможет небольшой хак

тут присутствует метод .on('end', fn). Простыми словами, когда сработает событие end (создастся css файл) вызываем функцию cssMin(), которая создаст минифицированный css файл.

Похожие видео ролики → LoftBlog: Gulp.js #06 — сборка и деплой проекта, gulp-useref, gulp-sftp

HD 00:28:32

Autodesk CIS: Автоматическая сборка крупных BIM проектов с последующей передачей в виртуальную реаль

Autodesk University Russia 2018. Москва, 3-4 октября 2018 http://au.autodesk.com/russia Вопросы использования ПО Autodesk можно обсудить на форуме: https://autode.sk/2OE1a1v BIM в промышленных проектах Автоматическая сборка крупных BIM пр…
Cмотреть видео

HD 00:07:51

LoftBlog: Gulp.js #05 — структура проекта, wiredep, bower — видео

Пройди БЕСПЛАТНО профориентацию в IT — https://bit.ly/2NLILne Структура и сборка веб приложения — часть 1. Рассматриваем корректную работу с bower. Смотри курс «Bacbone.js» : https://www.youtube.com/playlist?list=PLY4rE9dstrJx-28CgOCgcip…
Cмотреть видео

HD 00:14:27

LoftBlog: Объектно-ориентированное программирование и паттерны проектирования в PHP — 1 — видео

Пройди БЕСПЛАТНО профориентацию в IT — https://bit.ly/2NLILne Это первый вводный урок курса, в нем вы узнаете, что такое объектно-ориентированное программирование и создадите свой первый класс. Школа онлайн-образования: https://loftschool…
Cмотреть видео

HD 01:17:41

Цифровые технологии для быстрых продаж: проектирование и калькуляция «на лету»

Программный комплекс Infor CPQ для оптимизации работы с клиентами является единым центром обработки клиентских запросов и позволяет в on-line взаимодействии с Заказчиком создавать конкретное исполнение изделия, включая визуальное 2D и 3D пр…
Cмотреть видео

HD 00:59:55

Управление проектами на промышленных предприятиях

Многоуровневое планирование и согласование работ
Cмотреть видео

HD 00:43:13

Поддержка пилотного проекта ФСС в «Галактике ERP 9.1»

С 1 июля 2011 года началось поэтапное реформирование системы социального страхования. С инициативой модернизации существующего порядка выплаты пособий по временной нетрудоспособности, материнству и детству выступил Фонд социального страхова…
Cмотреть видео

HD 00:00:26

Хостинг REG.RU: создан для грандиозных проектов!

Хостинг — услуга от которой зависит скорость работы любого сайта. Обеспечьте ваш проект производительной инфраструктурой с хостинг-услугами REG.RU. Заходи на наш сайт: — Домены: — Хостинг и серверы: — Создание сайтов: — SS…
Cмотреть видео

HD 01:04:40

Пример проектной автоматизации детского оздоровительного лагеря

Запись вебинара от 31 августа 2015 года «Пример проектной автоматизации детского оздоровительного лагеря»
Cмотреть видео

HD 01:15:00

Пример проектной автоматизации санатория с аквапарком

Запись вебинара от 24 августа 2015 года «Пример проектной автоматизации санатория с аквапарком»
Cмотреть видео

HD 00:08:25

Как заработать проектному институту с помощью информационной 3D модели

Презентация содержит предложение проектным институтам сотрудничества в части создания и предложения заказчику информационной 3D модели (которая уже разработана проектным институтом), наделенной необходимым функционалом для решения прикладны…
Cмотреть видео

HD 00:01:21

Сборка мобильного приложения — Основы разработки мобильных приложений

 00:00:38

BIM в большом городе. Сезон 1. Эпизод 2. Анализ территории проектирования

BIM в большом городе. Сезон 1. Эпизод 2. Анализ территории проектирования
Cмотреть видео

HD 00:49:51

4. Проектирование розетки во Fusion 360 для фрезерования на станке Roland MDX-50

Детали мастер-классов можете посмотреть тут: Бесплатная летняя онлайн школа «Autodesk Fusion 360 с инструментами Roland для CAM и 3D печати» от специалистов компании ADS (официальный дилер Roland) и CAD Systems (авторизированный учебный ц…
Cмотреть видео

HD 00:59:02

Разработка и оформление архитектурно строительного проекта в AutoCAD LT

Вопросы по AutoCAD и AutoCAD LT можно задавать на форуме Autodesk по ссылке: В вебинаре показан пример создания и оформления архитектурно-строительного чертежа средствами, доступными в AutoCAD LT. В процессе работы над проектом использова…
Cмотреть видео

HD 00:13:49

Повышение инновационности проектов с помощью предварительных виртуальных испытаний

Секция «Цифровое производство» Повышение инновационности проектов с помощью предварительных виртуальных испытаний. Adams Vince С помощью предварительных виртуальных испытаний конструкторы и инженеры по всему миру способны выбирать наилучш…
Cмотреть видео

 00:02:56

BIM в большом городе. Сезон 1. Эпизод 5. Эскизное проектирование линейной части метрополитена

BIM в большом городе. Сезон 1. Эпизод 5. Эскизное проектирование линейной части метрополитена
Cмотреть видео

HD 00:01:25

DirectumRX: управление проектами

Уп­равляй­те про­ек­та­ми на всех ста­ди­ях – от ини­ци­ации и пла­ниро­вания до зак­ры­тия и по­меще­ния в ар­хив. Посетите демостенд: Зарегистрируйтесь на вебинар:
Cмотреть видео

HD 00:19:17

Проектный документооборот

Содержание (кликните на время для навигации): 00:56 Признаки проекта 01:30 Возможности модуля «Проекты» 02:03 Проект участия в выставке 03:19 Создание проекта 04:50 Папка проекта 05:31 Команда проекта 08:08 Создание документов по проекту 11…
Cмотреть видео

 01:06:09

Построение проектного конвейера в инжиниринговой компании / Онлайн-конференция

В ходе конференции будет рассмотрен инновационный подход к организации работы инжиниринговой компании – проектный конвейер. Участники смогут разобраться, как выстроить слаженную и экономную работу на повторяемых участках проектной деятельн…
Cмотреть видео

HD 00:53:36

Новая компьютерная программа «АЛТИУС — ПУСК» (Проектное управление современной компанией.

Друзья! Перед вами запись семинара, на котором была впервые продемонстрирована новая программа «ПУСК» компании «АЛТИУС СОФТ». Семинар состоялся 20.12.2016 г. Посмотрите это видео и узнайте как начать уходить с работы в 18.00! Подробн…
Cмотреть видео

HD 00:03:58

Краткий видеоролик о программе «АЛТИУС — ПУСК» (Проектное Управление Современной Компанией)

Друзья! Посмотрите небольшой промо-ролик о новой и полезной для вашего бизнеса программе «АЛТИУС — ПУСК». Мы познакомим вас с особенностями и возможностями программы, расскажем о том, как получать поручения и отчёты о работы в режиме onl…
Cмотреть видео

HD 00:33:57

Бюджетирование в процессе управления проектами

Этот семинар про то, как в программе «ПУСК» можно вести процесс бюджетирования! Любая наша программа содержит уникальный функционал!
Cмотреть видео

HD 00:09:31

Проект «Звездный путь SL». Александр Макаревич. Размышления о целях

Уважаемые коллеги, мы, команда корпоративного университета Softline, рады представить вам новый видео проект «Звездный путь SL». Это программа о профессионалах, специалистах своего дела и просто целеустремленных людях, которые каждый день …
Cмотреть видео

HD 00:04:23

Комплексный проект Softline и Fujitsu по построению суперкомпьютера в САФУ

Комплексный проект Softline и Fujitsu по построению суперкомпьютера в Северном (Арктическом) федеральном университете имени М.В. Ломоносова.
Cмотреть видео

HD 00:22:07

Проект «Звездный путь SL». Александр Макаревич. Первые шаги в управлении

Уважаемые коллеги, мы, команда корпоративного университета Softline, рады представить вам новый видео проект «Звездный путь SL». Это программа о профессионалах, специалистах своего дела и просто целеустремленных людях, которые каждый день …
Cмотреть видео

HD 00:19:04

Проект «Звездный путь SL». Александр Макаревич. Командная работа

Уважаемые коллеги, мы, команда корпоративного университета Softline, рады представить вам новый видео проект «Звездный путь SL». Это программа о профессионалах, специалистах своего дела и просто целеустремленных людях, которые каждый день …
Cмотреть видео

HD 00:04:05

Проект «Звездный путь SL». Александр Макаревич. Рекомендации молодым специалистам SL

Уважаемые коллеги, мы, команда корпоративного университета Softline, рады представить вам новый видео проект «Звездный путь SL». Это программа о профессионалах, специалистах своего дела и просто целеустремленных людях, которые каждый день …
Cмотреть видео

HD 00:02:33

Видео о реальных проектах интернета вещей в промышленности.

Будущее уже наступило! В нашем новом видео мы рассказываем о реальных проектах интернета вещей в промышленности. Компания Cisco прогнозирует подключение к сети более 37 млрд. объектов в 2020 году. Для промышленных предприятий такая тенденц…
Cмотреть видео

HD 00:58:33

Веб-семинар «Зарплатный проект на промышленном предприятии» (1С:ЗУП)

Предлагаем ознакомиться с записью веб-семинара «Зарплатный проект на промышленном предприятии», в рамках которого представим кейс внедрения «1С:Зарплата и управление персоналом» в компании с 5 000 сотрудниками. В рамках веб-семинара вы пол…
Cмотреть видео

HD 00:58:33

Веб-семинар «Зарплатный проект на промышленном предприятии» (1С:ЗУП)

Предлагаем ознакомиться с записью веб-семинара «Зарплатный проект на промышленном предприятии», в рамках которого представим кейс внедрения «1С:Зарплата и управление персоналом» в компании с 5 000 сотрудниками. В рамках веб-семинара вы пол…
Cмотреть видео

maxdenaro/gulp-maxgraph — githubmemory

Используется Gulp 4

Начало работы

Для работы с данной сборкой в новом проекте, склонируйте все содержимое репозитория
git clone <this repo> Затем, находясь в корне проекта, запустите команду npm i, которая установит все находящиеся в package.json зависимости. После этого вы можете использовать любую из четырех предложенных команд сборки (итоговые файлы попадают в папку app корневой директории):
gulp — базовая команда, которая запускает сборку для разработки, используя browser-sync

gulp build — команда для продакшн-сборки проекта. Все ассеты сжаты и оптимизированы для выкладки на хостинг.

gulp cache — команда, которую стоит запускать после gulp build, если вам нужно загрузить новые файлы на хостинг без кэширования.

gulp backend — специальная команда для создания сборки под дальнейшее бэкенд-взаимодействие. Подробнее об этом ниже.

Структура папок и файлов

├── src/                          # Исходники
│   ├── js                        # Скрипты
│   │   └── main.js               # Главный скрипт
│   │   ├── global.js             # файл с базовыми данными проекта - переменные, вспомогательные функции и т.д.
│   │   ├── components            # js-компоненты
│   │   ├── vendor                # папка для загрузки локальных версий библиотек
│   ├── scss                      # Стили сайта (препроцессор sass в scss-синтаксисе)
│   │   └── main.scss             # Главный файл стилей, содержащий в себе как глобальные настройки, так и подключение всех нужных компонентов
│   │   └── vendor.scss           # Файл для подключения стилей библиотек из папки vendor
│   │   └── _fonts.scss           # Файл для подключения шрифтов (можно использовать миксин)
│   │   └── _mixins.scss          # Файл для подключения миксинов из папки mixins
│   │   └── _vars.scss            # Файл для написания css- или scss-переменных
│   │   └── _settings.scss        # Файл для написания глобальных стилей
│   │   ├── components            # scss-компоненты
│   │   ├── mixins                # папка для сохранения готовых scss-миксинов
│   │   ├── vendor                # папка для хранения локальных css-стилей библиотек
│   ├── partials                  # папка для хранения html-частей страницы
│   ├── img                       # папка для хранения картинок
│   │   ├── svg                   # специальная папка для преобразования svg в спрайт
│   ├── resources                 # папка для хранения иных ассетов - php, видео-файлы, favicon и т.д.
│   │   ├── fonts                 # папка для хранения шрифтов в формате woff2
│   └── index.html                # Главный html-файл
└── gulpfile.js                   # файл с настройками Gulp
└── package.json                  # файл с настройками сборки и установленными пакетами
└── .editorconfig                 # файл с настройками форматирования кода
└── .stylelintrc                  # файл с настройками stylelint
└── README.md                     # документация сборки

Оглавление

  1. npm-скрипты
  2. Работа с html
  3. Работа с CSS
  4. CSS-миксины
  5. Работа с JavaScript
  6. Работа со шрифтами
  7. Работа с изображениями
  8. Работа с иными ресурсами
  9. Backend-скрипт

npm-скрипты

Вы можете вызывать gulp-скрипты через npm. Также в сборке есть возможность проверять код на соответствие конфигу (editorconfig) и валидировать html.

npm run html — запускает валидатор html, запускать нужно при наличии html-файлов в папке app.

npm run code — запускает editorconfig-checker для проверки соответствия конфиг-файлу.

Работа с html

Благодаря плагину gulp-file-include вы можете разделять html-файл на различные шаблоны, которые должны храниться в папке partials. Удобно делить html-страницу на секции.

Для вставки html-частей в главный файл используйте @include('partials/filename.html')

Если вы хотите создать многостраничный сайт — копируйте index.html, переименовывайте как вам нужно, и используйте.

При использовании команды gulp build, вы получите минифицированный html-код в одну строку для всех html-файлов.

Работа с CSS

В сборке используется препроцессор sass в синтаксисе scss.

Стили, написанные в components, следует подключать в main.scss. Стили из _fonts, _settings, _vars и _mixins так же подключены в main.scss.

Чтобы подключить сторонние css-файлы (библиотеки) — положите их в папку vendor и подключите в файле vendor.scss

Если вы хотите создать свой миксин — делайте это в папке mixins, а затем подключайте в файл _mixins.scss.

Если вы хотите использовать scss-переменные — обязательно удалите :root.

Для подключения css-файлов используйте директиву @import

В итоговой папке app/css создаются три файла:
main.css — для стилей страницы,
vendor.css — для стилей всех библиотек, использующихся в проекте.

При использовании команды gulp build, вы получите минифицированный css-код в одну строку для всех css-файлов.

CSS-миксины

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

Работа с JavaScript

Поддержка import и require не реализована! Файлы собираются автоматически из различных папок.

JS-код лучше делить на компоненты — небольшие js-файлы, которые содержат свою, изолированную друг от друга реализацию. Такие файлы помещайте в папку components.

В файле global.js должны храниться базовые данные проекта — переменные, какие-то вспомогательные функции (типа остановки скролла и т.д.).

В файле main.js ничего не подключается, он рекомендуется для реализации общей логики сайта.

Чтобы подключить сторонние js-файлы (библиотеки) — положите их в папку vendor.

При использовании команды gulp build, вы получите минифицированный js-код в одну строку для всех js-файлов.

Работа со шрифтами

Т.к. автор не поддерживает IE11, в сборке реализована поддержка только формата woff2 (это значит, что в миксине подключения шрифтов используется только данный формат).

Загружайте файлы woff2 в папку resources/fonts, а затем вызывайте миксин @font-face в файле _fonts.scss.

Работа с изображениями

Любые изображения, кроме favicon кладите в папку img.

Если вам нужно сделать svg-спрайт, кладите нужные для спрайта svg-файлы в папку img/svg. Иные svg-файлы просто оставляйте в папке img.

При использовании команды gulp build, вы получите минифицированные изображения в итоговой папке img.

Работа с иными ресурсами

Любые ресурсы (ассеты) проекта, под которые не отведена соответствующая папка, должны храниться в папке resources. Это могут быть видео-файлы, php-файлы (как, например, файл отправки формы), favicon и прочие.

Backend-скрипт

На данный момент реализована отдельная версия сборки под backend, которая похожа на gulp build, однако отличается отсутствием минификации итоговых файлов, что при передаче backend-специалисту просто не нужно.

Важно понимать, что если вы разрабатываете сайт под дальнейшее backend-взаимодействие, стоит сразу разбивать css-файлы по-другому. Вместо использования папки components, создавайте css-файлы напрямую рядом с main.scss, подключайте к html-файлу.

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

Мой стартовый репозиторий – Николай Громов

В моей практике по-прежнему встречаются проекты, требующие на выходе самый обычный набор html, css, js, картинок и прочих доп. файлов, поэтому недавно я обновил свой стартовый репозиторий для таких проектов аж до 4-й версии. Главное нововведение 4-й версии: автоматика самостоятельно определяет используемые блоки и берёт их в сборку.

Что это такое

Это репозиторий на github, с клонирования которого я начинаю каждый проект по вёрстке. Внутри методология БЭМ, pug и SCSS. Автоматизация сделана с gulp и webpack.

Собственно, это простая система сборки проекта, для которого хочется компонентного подхода, но без js-фреймворков.

Порог вхождения низкий: установленный Node.js, базовый навык работы с терминалом.

Зачем

Привычное работающее окружение. Приятно начинать проект с набором хорошо знакомых инструментов.

Разделение на блоки. Как в полном стеке БЭМ-а: все файлы блока хранятся в папке блока. К примеру, папка src/blocks/main-nav содержит все файлы, нужные для работы главной навигации: файл с пунктами меню, pug-примеси с разметкой, стили, javascript.

В сборку автоматически попадут только используемые блоки. Если БЭМ-блок упомянут в разметке страницы или указан в секции alwaysAddBlocks файла config.js, то его разметочный, стилевой и скриптовой файлы попадут в сборку (если существуют). Если блок перестаёт использоваться в разметке страниц, из сборки автоматически пропадает всё, что его касается.

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

Команда быстрого создания файловой структуры блока. node createBlock.js new-block pug js — создаст src/blocks/new-block, две пустые подпапки для изображений, scss-, pug- и js-файлы со стартовым содержимым. Если не указать в конце команды доп. расширения pug и js, соответствующие файлы не будут созданы.

Нет css-reset и normalize. Используется что-то вроде бутстраповского reboot — блок page (этот класс написан на теге html), включающего стили «прибитого подвала».

Как это работает

Описание работы есть в репозитории. На момент написания этого текста после запуска сервера разработки (npm start) происходит следующее:

  1. Очищается папка сборки (build/).
  2. Записывается файл src/pug/mixins.pug с include pug-файлов всех блоков.
  3. Файлы страниц (src/pages/**/*.pug) компилируются в html.
  4. Из скомпилированных html-файлов извлекается список всех классов уровня БЭМ-блока. На основании этого списка будут построены диспетчер подключения стилей и список всех js-файлов проекта.
  5. Генерируются спрайты, в папку сборки копируются картинки блоков и доп. файлы из секции addAssets файла config.js.
  6. Записывается диспетчер подключения стилей src/scss/style.scss, в котором:
    • Импорты файлов из секции addStyleBefore файла config.js. По умолчанию — SCSS-переменные и примеси.
    • Импорты файлов БЭМ-блоков, использующихся на проекте.
    • Импорты файлов БЭМ-блоков, упомянутых в секции alwaysAddBlocks файла config.js (таким образом можно взять в сборку любой блок, даже если его css-класс не упоминается в разметке).
    • Импорты файлов из секции addStyleAfter файла config.js. По умолчанию — стили для печати страницы.
  7. Записывается диспетчер подключений скриптов src/js/entry.js, в котором:
    • require файлов из секции addJsBefore файла config.js.
    • require файлов БЭМ-блоков, использующихся на проекте.
    • require файлов БЭМ-блоков, упомянутых в секции alwaysAddBlocks файла config.js.
    • require файлов из секции addJsAfter файла config.js.
  8. Компилируются и обрабатываются PostCSS-плагинами стили (src/scss/style.scss).
  9. Javascript (src/js/entry.js) собирается webpack-ом.
  10. Запускается локальный сервер и слежение за файлами.

При изменениях в разметке, стилях и скриптах происходит пересборка и автообновление страницы в браузере (в случае стилей — без перезагрузки страницы).

Как я с этим работаю

Клонирую репозиторий, захожу в папку проекта, удаляю папку .git, инициирую новый репозиторий, привязываю удалённый репозиторий, устанавливаю зависимости.

Запускаю сервер разработки (для команды npm start у меня есть алиас s).

Редактирую шаблон(ы) страниц (src/pug), если нужно. Сколько на проекте типов раскладок блоков по странице, столько (обычно) бывает и pug-шаблонов.

Пишу разметку страниц, используя готовые pug-примеси из библиотеки и добавляя нужные проекту блоки командой node createBlock.js ИМЯБЛОКА (при этом можно не останавливать сервер).

Для неповторяющихся (в отрисованном дизайне) структурных блоков не создаю pug-примесей, пишу их разметку напрямую в файлах страниц. Но для повторяющихся блоков я сразу добавляю pug-файл с примесью и описанием API этой примеси (см. пример).

Определяю SCSS-переменные, стилизую базовую типографику, стилизую блоки библиотеки до проектного вида. Параллельно стилизую специфические блоки проекта.

Если нужно взять в сборку блоки, классы которых не упоминаются в разметке (скажем, sprite-png, собирающий растровый спрайт), останавливаю сервер и перечисляю нужные блоки в секции alwaysAddBlocks файла config.js. Если нужны какие-либо дополнительные файлы (шрифты, фавиконки…), перечисляю их и путь их копирования в том же config.js.

Лицензия, поддержка

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

Поставляется «как есть», все риски — ваши. Поддержка и сообщения о багах — в ишью репозитория.

Заключение

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

Концепции API

| gulp.js

Следующие концепции являются предпосылками для понимания документации API. На них будут ссылаться повсюду, вернитесь к этой странице для подробных объяснений.

Если вы здесь новичок, начните с Руководства по началу работы.

Винил #

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

Виниловые адаптеры #

Хотя Vinyl позволяет описывать файл, необходим способ доступа к этим файлам. Доступ к каждому источнику файла осуществляется с помощью адаптера Vinyl.

Адаптер предоставляет:

  • Метод с сигнатурой src (globs, [options]) и возвращает поток, который создает объекты Vinyl.
  • Метод с подписью dest (folder, [options]) и возвращает поток, который потребляет объекты Vinyl.
  • Любые дополнительные методы, специфичные для их среды ввода / вывода, такие как symlink метод vinyl-fs .Они всегда должны возвращать потоки, которые производят и / или потребляют объекты Vinyl.

Задачи #

Каждая задача gulp — это асинхронная функция JavaScript, которая либо принимает обратный вызов с ошибкой, либо возвращает поток, обещание, эмиттер событий, дочерний процесс или наблюдаемое. Из-за некоторых ограничений платформы синхронные задачи не поддерживаются.

Более подробное объяснение см. В разделе «Создание задач».

Globs #

Glob — это строка букв и / или подстановочных знаков, например * , ** или ! , используется для сопоставления путей к файлам.Globbing — это поиск файлов в файловой системе с помощью одного или нескольких глобусов.

Если у вас нет опыта работы с глобусами, см. «Объяснение глобусов».

База глобуса #

База глобуса — иногда называемая родительским элементом глобуса — представляет собой сегмент пути перед любыми специальными символами в строке глобуса. Таким образом, база глобуса /src/js/**.js равна / src / js / . Все пути, соответствующие глобу, гарантированно имеют общую базу глобуса — этот сегмент пути не может быть переменным.

Экземпляры Vinyl, генерируемые src () , создаются с базовым набором glob в качестве их свойства base .При записи в файловую систему с помощью dest () базовый будет удален из пути вывода для сохранения структуры каталогов.

Для получения более подробной информации см. Родительский репозиторий glob.

Статистика файловой системы #

Метаданные файла предоставляются как экземпляр fs.Stats узла. Он доступен как свойство stat в ваших экземплярах Vinyl и используется внутри компании, чтобы определить, представляет ли объект Vinyl каталог или символическую ссылку.При записи в файловую систему разрешения и значения времени синхронизируются из свойства stat объекта Vinyl.

Режимы файловой системы #

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

Модули #

Gulp состоит из множества небольших модулей, которые соединены вместе для согласованной работы. Используя semver в небольших модулях, мы можем выпускать исправления ошибок и функции без публикации новых версий gulp. Часто, когда вы не видите прогресса в основном репозитории, работа выполняется в одном из этих модулей.

Если у вас возникли проблемы, убедитесь, что ваши текущие модули обновлены с помощью команды npm update .Если проблема не исчезнет, ​​откройте вопрос в репозитории отдельного проекта.

  • гробовщик - система регистрации задач
  • винил - виртуальные файловые объекты
  • vinyl-fs - виниловый адаптер к вашей локальной файловой системе
  • glob-watcher - файловый наблюдатель
  • bach - оркестровка задач с использованием серии ( ) и parallel ()
  • last-run - отслеживает время последнего выполнения задачи
  • vinyl-sourcemap - встроенная поддержка исходной карты
  • gulp-cli - интерфейс командной строки для взаимодействия с gulp

Глоток | IntelliJ IDEA

IntelliJ IDEA интегрируется с Gulp.js Task Runner. IntelliJ IDEA анализирует файлы Gulpfile.js, распознавая определения задач, показывает задачи в виде дерева, позволяет перемещаться между задачей в дереве и ее определением в файле Gulpfile.js, а также поддерживает выполнение и отладку задач.

Задачи Gulp.js можно запускать из дерева задач в специальном окне инструментов Gulp или из файла Gulpfile.js, запустив конфигурацию запуска Gulp.js, или как задачу перед запуском из другой конфигурации запуска. IntelliJ IDEA показывает результат выполнения задачи в окне инструмента «Выполнить».Окно инструмента показывает вывод Grunt, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. Д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.

Перед тем, как начать

Загрузите и установите Node.js.

Установка Gulp.js

Чтобы использовать Gulp в проекте IntelliJ IDEA, вам понадобятся два пакета:

  • Глобально установленный пакет gulp-cli (интерфейс командной строки Gulp) для выполнения команд Gulp.

  • Пакет gulp, установленный в качестве зависимости разработки для построения дерева задач проекта и предоставления помощи при написании кода при редактировании файла Gulpfile.js. Узнайте больше о Gulpfile.js на официальном сайте Gulp.js.

Установить gulp-cli глобально

  • Во встроенном терминале ( Alt + F12 ) введите:

    npm install -global gulp-cli

Установите Gulp.js в проект

  • Во встроенном терминале ( Alt + F12 ) введите:

    npm install gulp --save-dev

Вы также можете установить пакеты на Node.js и NPM, как описано в npm, pnpm и Yarn.

Запуск задач Gulp.js из дерева задач

IntelliJ IDEA позволяет легко и быстро запускать задачи Gulp.js прямо из дерева задач в окне инструмента Gulp. IntelliJ IDEA автоматически создает временную конфигурацию запуска, которую при необходимости можно сохранить и использовать позже.

Gulp.js начинает построение дерева задач, как только вы вызываете Gulp.js, выбирая «Показать задачи Gulp» в контекстном меню Gulpfile.js в окне инструмента «Проект» или в файле Gulpfile.js открыт в редакторе. Дерево построено в соответствии с файлом Gulpfile.js, для которого был вызван Gulp.js. Если в вашем проекте несколько файлов Gulpfile.js, вы можете построить отдельное дерево задач для каждого из них и запускать задачи, не отказываясь от ранее построенных деревьев задач. Каждое дерево отображается под отдельным узлом.

Технически IntelliJ IDEA вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Делается это бесшумно и не требует никаких шагов с вашей стороны.

Открыть окно инструмента Gulp

Когда вы впервые строите дерево задач в течение текущего сеанса IntelliJ IDEA, окно инструмента Gulp еще не открывается.

По умолчанию IntelliJ IDEA не распознает ES6 в Gulpfile.js и не может построить дерево задач. Чтобы решить эту проблему, обновите конфигурацию запуска Gulp.js по умолчанию.

Построить дерево задач из ES6 Gulpfile.js

  1. В главном меню выберите.

  2. В узле «Шаблоны» щелкните Gulp.js.

  3. В открывшемся диалоговом окне «Конфигурация запуска / отладки: Gulp.js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

Построение дерева задач из окна инструмента Gulp

  • В окне инструмента Gulp щелкните панель инструментов и выберите из списка нужный файл Gulpfile.js. По умолчанию IntelliJ IDEA показывает файл Gulpfile.js в корне вашего проекта.

  • Если у вас есть другой файл Gulpfile.js, нажмите Выбрать Gulpfile.js и выберите нужный файл Gulpfile.js в открывшемся диалоговом окне. IntelliJ IDEA добавляет новый узел с путем к выбранному файлу Gulpfile.js в его заголовке и строит дерево задач под новым узлом.

Восстановить дерево

Сортировка задач в дереве по их именам

Запустить задачу

Запустить задачу по умолчанию

Запустить несколько задач

Перейти к определению задачи

Запуск задач из Gulpfile.js

  1. Поместите курсор на определение задачи, которую нужно запустить, и выберите «Выполнить» <имя задачи> в контекстном меню. IntelliJ IDEA создает и запускает временную конфигурацию запуска с именем выбранной задачи.

  2. Чтобы сохранить автоматически созданную временную конфигурацию запуска, поместите курсор на определение задачи, для которой она была создана, и выберите Сохранить <имя задачи> в контекстном меню выбора.

Запуск и отладка задач в соответствии с конфигурацией запуска

Помимо использования временных конфигураций запуска, которые IntelliJ IDEA создает автоматически, вы можете создать и запустить свой собственный Gulp.js запускать конфигурации.

Создайте конфигурацию запуска Gulp.js

  1. В главном меню выберите.

  2. Щелкните на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Запуск / отладка конфигурации: Gulp.js».

  3. Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение файла Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в текущем проекте. корень.

  4. Укажите интерпретатор Node.js для использования. Это может быть локальный интерпретатор Node.js или Node.js в подсистеме Windows для Linux.

    При желании укажите переменные среды для Node.js и аргументы для выполнения задач. Используйте формат - <имя_параметра> <значение_параметра> , например: --env development . Узнайте больше на официальном сайте Gulp.

Выполнение задач

Отладка задач

  1. Создание Gulp.js запускать / отлаживать конфигурацию, как описано выше.

  2. Откройте файл Gulpfile.js в редакторе и при необходимости установите в нем точки останова.

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

  4. В открывшемся окне средства отладки проанализируйте выполнение приостановленной задачи, выполните пошаговое выполнение задачи и т. Д., Как описано в разделах «Проверка приостановленной программы» и «Пошаговое выполнение программы».

Запустить задачу Gulp как задачу перед запуском

  1. Откройте диалоговое окно «Запуск / отладка конфигураций», выбрав в главном меню, и выберите нужную конфигурацию из списка или создайте ее заново, щелкнув и выбрав соответствующий запустить тип конфигурации.

  2. В открывшемся диалоговом окне щелкните область «Перед запуском» и выберите из списка «Запустить задачу Gulp».

  3. В открывшемся диалоговом окне задачи Gulp укажите Gulpfile.js, где определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Gulp.

    Укажите расположение интерпретатора Node.js, передаваемые ему параметры и путь к пакету gulp.

Автоматический запуск задач Gulp.js

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

  1. В диалоговом окне «Настройки / Предпочтения» Ctrl + Alt + S щелкните «Задачи при запуске» в разделе «Инструменты».

  2. На открывшейся странице Startup Tasks щелкните на панели инструментов.

  3. Из списка выберите необходимую конфигурацию запуска Gulp.js. Конфигурация добавлена ​​в список.

    Если в проекте нет подходящей конфигурации, щелкните и выберите «Редактировать конфигурации». Затем определите конфигурацию с необходимыми настройками в Run / Debug Configuration: Gulp.js открывается страница. При сохранении новой конфигурации она автоматически добавляется в список задач запуска.

Последнее изменение: 20 октября 2021 г.

Задача сборки и выпуска Gulp - Azure Pipelines

  • 2 минуты на чтение

В этой статье

Конвейеры Azure | Azure DevOps Server 2020 | Сервер Azure DevOps 2019 | TFS 2018 - TFS 2015

Используйте эту задачу для запуска задач gulp с помощью Node.js потоковая система сборки на основе задач.

Требования

глоток

Фрагмент YAML

  # глоток
# Запускаем gulp Node.js систему сборки на основе задач потоковой передачи
- задача: глоток @ 1
  входы:
    #gulpFile: 'gulpfile.js'
    #targets: # Необязательно
    #arguments: # Необязательно
    #workingDirectory: # Необязательно
    #gulpjs: # Необязательно
    #publishJUnitResults: false # Необязательно
    #testResultsFiles: '** / TEST - *. xml' # Требуется, если publishJUnitResults == True
    #testRunTitle: # Необязательно
    #enableCodeCoverage: false
    #testFramework: 'Mocha' # Необязательно.Варианты: мокко, жасмин
    #srcFiles: # Необязательно
    #testFiles: 'test / *. js' # Требуется, если enableCodeCoverage == True
  

Аргументы

Аргумент Описание
gulpFile
gulp Путь к файлу
(Обязательно) Относительный путь от корня репо скрипта файла gulp, который вы хотите запустить.
Значение по умолчанию: gulpfile.js
целей
глоток Задачи
(Необязательно) Список выполняемых задач, разделенный пробелами.Если не указан, будет запущена задача по умолчанию.
аргументы
аргументы
В gulp переданы дополнительные аргументы.
Совет: --gulpfile не нужен, так как уже добавлен через ввод gulpFile выше
cwd
Рабочий каталог
(Необязательно) Текущий рабочий каталог при запуске сценария. По умолчанию используется папка, в которой находится сценарий.
Псевдонимы аргументов: рабочий каталог
gulpjs
gulp.js расположение
(Необязательно) Путь к альтернативному файлу gulp.js относительно рабочего каталога.
Псевдонимы аргументов: рабочий каталог
publishJUnitResults
Опубликовать в Azure Pipelines
Выберите этот параметр, чтобы опубликовать результаты теста JUnit, полученные с помощью сборки gulp, в Azure Pipelines.
Значение по умолчанию: false
testResultsFiles
Test Results Files
(Обязательно) Путь к файлам результатов тестирования.Можно использовать подстановочные знаки. Например, ** / TEST - *. Xml для всех файлов XML, имя которых начинается с TEST-.
Значение по умолчанию: ** / TEST - *. Xml
testRunTitle
Test Run Title
(Необязательно) Введите имя для тестового прогона
enableCodeCoverage
Включить покрытие кода
(Необязательно) Выберите этот параметр, чтобы включить покрытие кода с использованием Стамбула
Значение по умолчанию: false
testFramework
Test Framework
(Необязательно) Выберите свою тестовую среду
Значение по умолчанию: Mocha
srcFiles
Исходные файлы
(Необязательно) Укажите путь к исходным файлам, которые вы хотите перехватитьRequire ()
testFiles
Файлы тестовых сценариев
(обязательно) Укажите путь к файлам тестовых сценариев.
Значение по умолчанию: test / *.js

Пример

Запустите gulp.js

На вкладке "Сборка":


Упаковка: npm

Установите npm.


Сборка: gulp

Запустите ваш сценарий.

  • путь к файлу gulp: gulpfile.js
  • Advanced, расположение gulp.js: node_modules / gulp / bin / gulp.js

Создайте узел.js приложение

Создайте приложение Node.js с помощью gulp

Открытый исходный код

Эта задача с открытым исходным кодом на GitHub. Отзывы и предложения приветствуются.

FAQ

Нужен ли мне агент?

Для запуска сборки или выпуска необходим хотя бы один агент.

У меня проблемы. Как я могу их устранить?

См. Устранение неполадок при сборке и выпуске.

Я не могу выбрать пул агентов по умолчанию и не могу поставить свою сборку или выпуск в очередь. Как это исправить?

См. Пулы агентов.

Моя задача push NuGet завершается ошибкой из-за следующей ошибки: «Ошибка: невозможно получить сертификат локального эмитента». Как я могу это исправить?

Это можно исправить, добавив доверенный корневой сертификат. Вы можете либо добавить переменную среды NODE_EXTRA_CA_CERTS = file в свой агент сборки, либо добавить в конвейер переменную задачи NODE.EXTRA.CA.CERTS = file . См. Документацию Node.js для получения дополнительных сведений об этой переменной. См. Раздел Установка переменных в конвейере для получения инструкций по установке переменной в конвейере.

Компиляция кода ES6 с помощью Gulp и Babel, часть 1

В первой из пяти частей по компиляции нескольких файлов ES6 в минифицированный пакет вы узнаете, как настроить проект и построить простую реализацию.

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

Круто? Прохладный. Давайте копаться.

Шаг 1: Создайте

package.json File

Файл package.json - это файл конфигурации, который используется во многих интерфейсных проектах. Он работает с менеджерами пакетов JavaScript, такими как NPM и Yarn, для управления зависимостями вашего проекта, выпусками, скриптами и т. Д.

Чтобы подготовить этот проект, сначала убедитесь, что у вас установлен NPM. В качестве альтернативы вы можете использовать Yarn, но в приведенных здесь примерах будет использоваться NPM. Я не буду вдаваться в процесс установки, полагая, что вы уже использовали NPM и установили его.(Если нет, прочтите это руководство.)

После установки NPM перейдите в каталог проекта и запустите сценарий инициализации из NPM.

  $ cd путь / к / вашему / проекту
$ npm init -y
  

Теперь у вас должен быть файл package.json с некоторыми базовыми значениями. При необходимости вы можете изменить эти значения в любой момент.

Шаг 2. Установка зависимостей

Установив файл package.json , мы готовы установить зависимости проекта.На данный момент это:

Вы можете установить их с помощью одной команды:

  $ npm install --save-dev @ babel / core @ babel / preset-env gulp @ 4 gulp-babel gulp-plumber
  

Эти зависимости теперь будут перечислены в вашем файле package.json .

Шаг 3. Инициализация Git

Это хороший момент для инициализации Git. Перед этим создайте файл .gitignore в корне вашего проекта и добавьте к нему node_modules . node_modules - это место, где были установлены ваши зависимости, и вы избавите себя от огромной головной боли, не отслеживая этот код.

.gitignore

  node_modules  

Затем вы можете инициализировать свой репозиторий:

  $ git init
  

Шаг 4: Написание компонентов JavaScript

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

  1. Компонентно-управляемый JavaScript, что означает, что мы собираемся написать отдельный файл JavaScript для каждого составная часть. В примерах будет показан фиктивный код, но структура продемонстрирует акцент на компонентах.
  2. Все исходные файлы JavaScript будут помещены в каталог src , а файлы сборки будут помещены в каталог dist .

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

С учетом сказанного, давайте создадим два компонента - Foo и Bar . Мы продолжим работать с этими компонентами на протяжении всех пяти частей этой серии.

src / components / foo.js

  class Foo {
log (msg) {
console.log (msg)
}
}

src / components / bar.js

  class Панель {
print (msg) {
document.write (msg)
}
}

Обратите внимание, что это оба класса ES6, и каждый из них имеет один (но разный) метод экземпляра. Foo имеет метод log , который принимает сообщения и записывает их в консоль. Bar имеет метод print , который принимает сообщение и записывает его в DOM.

Шаг 5: Gulpfile

Затем давайте создадим Gulpfile ( gulpfile.js ). Это наша конфигурация для нашей сборки. Он снабжен комментариями, чтобы вы могли следить за происходящим.

gulpfile.js

  
const {src, dest} = require ("gulp")


const babel = require ("gulp-babel")
const plumber = require ("gulp-plumber")


exports.default = function (done) {
return (
src ("./ src / components / ** / *.js ")
.pipe (сантехник ())
.pipe (
babel ({
presets: [
[
" @ babel / env ",
{
modules: false
}
]
]
})
)
.pipe (dest ("./ dist"))
)
}

Шаг 6. Добавьте сценарий командной строки

На этом этапе, если у вас глобально установлен Gulp, вы сможете запустить сборку, просто вызов gulp :

  $ gulp
  

Вам не нужно следовать gulp с именем задачи, потому что экспорт по умолчанию ( exports.по умолчанию в вашем gulpfile.js ) предполагается, когда аргумент имени задачи отсутствует.

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

Поэтому я предпочитаю использовать контекст проекта, добавляя сценарий в package.json :

package.json

  {
"scripts": {
"build": "gulp"
}
}

Теперь мы можем запустить сборку следующим образом:

  $ npm run build
  

И это запустит gulp , но это будет выполняться в текущем контексте (наш проект), что означает, что он будет использовать версию gulp, которая есть в проекте (в каталоге node_modules ) и требуется.

Шаг 7: Протестируйте

После успешной сборки вы увидите файл в dist для каждого компонента. Не стесняйтесь брать эти файлы, вставлять их в файл HTML и затем работать с ними.

Например, вы можете поместить файл index.html в каталог dist и указать его на оба компонента.

dist / index.html

   

И тогда вы можете открыть файл и консоль JavaScript, и запустите что-то вроде этого:

  var foo = new Foo () 
foo.log ("Hello World")

var bar = new Bar ()
bar.print ("Hello World")

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

Или вы можете перемещаться по серии:

  1. Часть 1: Настройка и простая реализация
  2. Часть 2: Объединенный пакет
  3. Часть 3: Динамический манифест
  4. Часть 4: Очистка файлов и сокращение вывода
  5. Часть 5: Хеширование активов

Наш базовый процесс сборки Gulp

ОБНОВЛЕНИЕ

: Мы обновили наш процесс.Прочтите все об этом здесь.

В Foster Made мы работаем над широким спектром проектов, начиная от небольших сайтов Statamic и заканчивая сложными сайтами ExpressionEngine и крупномасштабными приложениями Angular и Symfony. Эти проекты различаются по технологии, размеру и сложности. Но они разделяют некоторые фундаментальные потребности современных веб-проектов. И эти потребности удовлетворяются за счет написания автоматизированных сценариев. По мере усложнения проекта эти средства выполнения задач видоизменяются и расширяются. Процесс сборки сложного приложения может сильно отличаться от простой сборки cms в виде плоских файлов.Но все выигрывают от базового процесса сборки.

Эти задачи необходимы для каждого проекта:

  • Компиляция Sass
  • Concat и минимизация Javascript
  • Отдельные файлы для разработки и производства (один для упрощения отладки, а другой для минимизации и оптимизации для повышения скорости)
  • Управление версиями / очистка кеша

Мы хотели универсализировать эти основные задачи, чтобы мы могли легко использовать их в качестве отправной точки для всех проектов. ПРИМЕЧАНИЕ. Мы удалили исходное репозиторий Github в пользу нашего нового репозитория пакетов npm: https: // github.com / fostermadeco / fm-site-build

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

Структура каталогов

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

 .
├── gulp # <- Здесь можно определить пользовательские задачи gulp
├── dev # <- Сгенерированные предварительные ресурсы приложения
│ ├── app.css # <- Скомпилированные, объединенные файлы sass проекта
│ ├── vendor.css # <- Скомпилированные, объединенные файлы sass, скомпилированные поставщиком
│ ├── main.js # <- Объединенные файлы js с исходными картами
├── dist # <- Сгенерированные, готовые к работе активы приложения
│ ├── main-min.css # <- Минифицированный css
│ ├── main-min.js # <- Минифицированный js
│ src # <- где редактировать файлы
│ ├── scss
│ │ ├── mixins # <- Папки для партиалов sass
│ │ └── main.scss
│ └── js # <- Редактируемые файлы js, добавление во вложенные папки
├── images # <- Ресурсы изображения относительно `/`
├── fonts # <- Ресурсы шрифтов относительно `/`
├── static # <- pdfs и т. Д.Файлы, которые должны относиться к `/`
├── vendor # <- Сторонние активы
│ ├── bower_components # <- Указать путь в .bowerrc
│ ├── css # <- css другого поставщика не входит в Bower
│ └── js # <- js других поставщиков не в Bower
└── public / site /../ templates # <- Где бы ни находились ваши шаблоны
└── index.html # <- Где ваши таблицы стилей и js включены из 
 

Приложение vs.Сайт

В большинстве веб-приложений идеально, чтобы папки dev и dist содержали все ресурсы, необходимые для запуска приложения. Изображения, шрифты и т. Д. Копируются в папки dev и dist. ExpressionEngine и Statamic имеют шаблоны вне этих папок и не настроены для компиляции или перемещения. Таким образом, мы должны использовать несколько иной подход при организации активов. Важным моментом в приведенной выше структуре каталогов является то, что изображения и CSS всегда располагаются там, где сохраняются ссылки на пути между ними.Обычно мы никуда не копируем изображения, а ссылаемся на них из основной папки изображений.

Активы поставщика

Bower - это стандарт для управления и обновления внешних ресурсов. Теоретически это так же просто, как «bower install awesome-package --save». На практике я столкнулся с парой ошибок.

Делаем файлы Bower пригодными для использования

Простой способ использовать файлы Bower - просто ссылаться на них из каталога bower_components. Однако это плохо масштабируется. Вы не хотите ссылаться на 8 разных файлов в производственной среде.Нам нужен способ извлечь эти файлы из Bower и сделать их пригодными для использования в наших проектах.

Когда пакет Bower установлен, он захватывает весь репозиторий git. Как нам получить список файлов, которые мы действительно хотим включить в наш проект? Мы можем получить список файлов из "основного" свойства каждого пакета в их файле bower.json. Однако это не дает нам полностью пригодного для использования списка. Он может включать файлы .less, если вам нужен .css, или может просто быть неточным. Да, вы можете использовать неофициальное свойство overrides в bower.json, но это еще одна конфигурация, которую нужно отслеживать, и мы пытаемся консолидировать конфигурацию, потому что хотим, чтобы этот процесс был очень простым в настройке в новом проекте. Также это не решает возможную проблему со шрифтами и изображениями.

Мне очень хотелось автоматизировать весь процесс: от установки bower до создания файлов, готовых к работе. Я пробовал кучу разных пакетов и подходов в надежде решить эту проблему, но аномалии продолжают возникать. Иногда небольшой контроль над конфигурацией помогает сгладить разочарование в будущем.Введите gulp.options.js

Насколько это возможно, gulp.options.js объединяет конфигурацию для каждого сайта. Файл сильно прокомментирован и объясняет, что делает каждый параметр. Надеюсь, при запуске нового проекта это единственная конфигурация, которую нужно изменить. Он включает в себя список файлов Bower js и css, которые будут использоваться. Он также определяет каталоги шрифтов и изображения. Все в этих списках будет включено в файлы dev и dist.

Аномалии файлов шрифтов

Файлы шрифтов

могут представлять другую проблему, поскольку их расположение и, следовательно, ссылка на путь css зависят от пакета.Это мешает автоматизировать использование этих файлов в сборках dev и dist. Задача Bower нормализует это, переписывая '../fonts' в './fonts' в CSS, когда он копируется из Bower в папки dev и dist.

Когда поиск невозможен

Что-то вроде Browserify могло бы решить некоторые из этих проблем. И мы имели удовольствие использовать его в некоторых проектах. Но мы работаем над множеством существующих проектов, большинство из которых было бы сложно перенести для использования чего-то вроде Browserify.Наш процесс сборки Gulp проще реализовать в проектах, которые могут содержать различные существующие активы.

Всегда развивается

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

Создание приложений Symfony2 с помощью Gulp

Сегодня Бернхард спросил в Твиттере, где мы видим, как идет работа с активами, и я ответил, что Grunt или Gulp возьмут на себя управление.В настоящее время я использую Grunt в некоторых своих проектах (в том числе для создания этого веб-сайта) и Gulp для некоторых более мелких вещей. Однако я хотел на некоторое время переместить один из моих больших проектов Symfony2 с Grunt на Gulp, и я воспринял обсуждение в Твиттере как причину, чтобы наконец сделать это. В этой статье я хочу объяснить некоторые аспекты использования Gulp (и Bower) в проекте Symfony2.

Я использую Gulp не только для создания своих ресурсов, но и для запуска тестов, покрытия кода и стиля проверки, и я рассмотрю все эти аспекты в этой статье.

Содержание

Зависимости

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

  • Gulp для выполнения задач (вместе с кучей плагинов Gulp и других модулей Node.js)
  • Bower для установки и управления активами
  • Sass
  • Требовать JS для динамической загрузки файлов JavaScript
  • Bootstrap как интерфейсный фреймворк
  • jQuery , потому что я знаком с ним, а Bootstrap все равно требует этого
  • PHPUnit для запуска моих тестов и покрытия кода
  • PHP_CodeSniffer , чтобы проверить стиль моего кода PHP

Обратите внимание, , что эта статья была обновлена, чтобы отразить изменения в структуре каталогов в boostrap-sass v3.2

Структура проекта

Каждый проект Symfony2 (использующий стандартную версию) имеет одинаковую базовую структуру. Однако, поскольку это бэкэнд-фреймворк, он дает мало рекомендаций по организации ресурсов. Согласно соглашению, команда Symfonys assets: install скопирует все из каталога bundles Resources / public в папку web / проекта. Я использую это соглашение, чтобы упростить работу с путем к ресурсам в моих файлах Sass, JavaScript и Gulp.Вот части структуры моего проекта, которые имеют отношение к этой статье:

  - src / Bundle /
    - AcmeDemo /
        - Ресурсы / общедоступные /
            - js /
            - дерзость /
    - AcmeFrontendBundle /
        - Ресурсы / общедоступные /
            - js /
            - дерзость /
    - AcmeUserBundle /
        - Ресурсы / общедоступные
            - js /
            - дерзость /
Интернет /
    - связки /
    - компоненты/
    - css /
    - шрифты /
    - js /
Gulpfile.js  

Если я запустил команду assets: install --symlink , Symfony создаст для меня символические ссылки из каталога web / bundles / в общедоступный каталог в соответствующем пакете.В моей структуре каталог web / bundles / выглядит так:

  - Интернет / пакеты /
    - acmedemo /
    - acmefrontend /
    - acmeuser /  

Я думаю, очевидно, что каталог web / css / будет содержать скомпилированные файлы CSS, web / fonts / файлы шрифтов и web / js / файлы JavaScript. В каталоге web / components / хранятся ресурсы, загруженные Bower, и я расскажу об этом чуть позже.

Глоток

Если вы никогда не работали с Gulp и вам нужно знать, как его установить, и узнать больше об основных концепциях, вы можете обратиться к руководству по началу работы или к статье Building with Gulp в Smashing Magazine. Короче говоря, вы можете установить Gulp с помощью NPM.

Вам необходимо установить Gulp как глобально, так и локально в вашем проекте:

  $ npm install -g gulp
$ npm install --save-dev gulp  

Теперь вы можете создать Gulpfile .js и требуется модуль gulp :

  var gulp = require ('gulp');

gulp.task ('по умолчанию', function () {});  

Таблицы стилей

Сначала я хочу поговорить об управлении и построении таблиц стилей для моего проекта.

Таблицы стилей с Sass

Sass обладает замечательными функциями, которые делают его лучше простого CSS, и одна из них - возможность определять переменные. Однако, если я скомпилирую разные файлы Sass по отдельности и объединю их позже, я не смогу ссылаться на переменные из разных исходных файлов.Поскольку мне все равно нужен один файл Sass, я использую оператор import , чтобы включить их в один мастер-файл. Я помещаю master.scss в каждый пакет и импортирую каждый файл .scss пакета. master.scss из AcmeFrontendBundle включает master.scss из всех остальных пакетов. Выглядит это так:

 

@import '../../acmeuser/sass/master';
@import '../../acmeother/sass/master';  

Управление активами с помощью Bower

Прежде чем я расскажу о том, как я использую Bootstrap, мне нужно поговорить о Bower.Первое, что я сделал с Bower, - это изменил каталог загрузки по умолчанию, создав файл .bowerrc .

  {
  "каталог": "сеть / компоненты"
}  

Затем я загрузил bootstrap-sass-official (как следует из названия, официальный порт Sass для Bootstrap), используя bower install --save bootstrap-sass-official .

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

Я использую свой BraincraftedBootstrapBundle для интеграции Bootstrap в Symfony. Однако я отключил функцию автоматической настройки для Assetic, потому что я хочу настроить ее самостоятельно, используя Bower и Gulp, и поэтому это не имеет значения, используете вы пакет или нет.Bower загружает файлы Sass в components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / , и я просто импортирую их из своего master.scss в AcmeFrontendBundle . Помните, что команда assets: install копирует файлы в web / bundles / , и там происходит компиляция.

 

@import '../../../components/bootstrap-sass-official/assets/stylesheets/_bootstrap';

@import '../../acmeuser/sass/master';
@Импортировать '../../acmeother/sass/master ';  

Таблицы стилей здания

Наконец, я достиг точки, когда мы можем говорить о создании таблиц стилей, то есть о компиляции Sass в код CSS. Для компиляции Sass я использую gulp-sass и порт Sass на Node.js (это быстрее).

  $ npm install --save-dev gulp-sass  

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

 

var sass = (sass = require ('gulp-sass'));

глоток.task ('sass', function () {
  глоток
    .src ('./ web / bundles / acmefrontend / sass / master.scss')
    .pipe (sass ({sourceComments: 'карта'}))
    .pipe (gulp.dest ('./ web / css /'));
});  

Сначала мне нужно создать символическую ссылку на ресурсы в web / bundles / , запустив php app / console assets: install --symlink . Выполнение задачи с помощью gulp sass скомпилирует таблицы стилей из всех пакетов и Bootstrap и сохранит их в web / css / master.css . В моем проекте у меня есть шаблон макета в моем пакете внешнего интерфейса, куда я теперь могу включить эту таблицу стилей.

 

  

Теперь все, что касается таблиц стилей, должно работать; кроме Glyphicons, предоставляемых Bootstrap.

Гильфиконы

Bootstrap включает Glyphicons, иконочный шрифт, в свои таблицы стилей, ссылаясь на них с помощью bootstrap / . Однако файлы шрифтов находятся в web / components / bootstrap-sass-official / vendor / assets / fonts / bootstrap / , а код CSS - в web / css / .Я мог бы просто изменить путь, чтобы он указывал на web / components , но я разборчив, когда дело доходит до пути и того, как они выглядят (что, если кто-то проверяет источник?), И поэтому я копирую их в web / fonts / каталог с помощью задачи Gulp. Плагин gulp-copy обеспечивает именно ту функциональность, которая мне нужна. У него есть опция префикса , которая удаляет ненужные каталоги с начала исходного пути.

 

var copy = (copy = require ('gulp-copy'));

глоток.task ('шрифты', function () {
  ответный глоток
    .src ('./ web / components / bootstrap-sass-official / assets / fonts / bootstrap / *').
    .pipe (копия ('./ web / fonts', {prefix: 7}));
});  

Однако путь все равно неверный, вместо bootstrap / он должен быть ../fonts/ . К счастью, Bootstrap использует переменную для этого пути, и я могу изменить ее, добавив следующую строку перед импортом Bootstrap в мой Sass.

 

$ icon-font-path: '../fonts/';  

Запуск gulp fonts sass выполнит как fonts , так и задачу sass , и теперь все должно работать нормально.

Javascript

Я использую RequireJS в качестве модуля и загрузчика файлов для своего проекта, чтобы динамически загружать только те скрипты, которые требуются конкретной странице. Точкой входа в JavaScript является app.js в AcmeFrontendBundle . У каждого пакета есть собственный main.js , который сам требует файлов и модулей, которые ему нужны.

Загрузить JavaScript с помощью RequireJS

app.js также необходимо настроить jQuery и подключаемые модули jQuery, предоставляемые Bootstrap, поскольку для них не определены модули RequireJS.

 

require.config ({
  paths: {
    бутстрап: '../../bootstrap',
    jquery: '../../jquery',
  },
  shim: {
    'bootstrap / affix': {deps: ['jquery'], экспорт: '$ .fn.affix'},
    'bootstrap / alert': {deps: ['jquery'], export: '$ .fn.alert'},
    'bootstrap / button': {deps: ['jquery'], экспорт: '$ .fn.button'},
    'bootstrap / carousel': {deps: ['jquery'], export: '$ .fn.carousel'},
    'bootstrap / collapse': {deps: ['jquery'], экспорт: '$ .fn.collapse'},
    'bootstrap / dropdown': {deps: ['jquery'], экспорт: '$.fn.dropdown '},
    'bootstrap / modal': {deps: ['jquery'], экспорт: '$ .fn.modal'},
    'bootstrap / popover': {deps: ['jquery'], экспорт: '$ .fn.popover'},
    'bootstrap / scrollspy': {deps: ['jquery'], экспорт: '$ .fn.scrollspy'},
    'bootstrap / tab': {deps: ['jquery'], экспорт: '$ .fn.tab'},
    'bootstrap / tooltip': {deps: ['jquery'], экспорт: '$ .fn.tooltip'},
    'bootstrap / transition': {deps: ['jquery'], exports: '$ .fn.transition'},
  },
});

требуется (['основной']);  

Самая интересная часть в приведенном выше коде - последняя строка: она сообщает RequireJS о необходимости загрузки файла main.js в том же каталоге. В настоящее время в моем проекте не так много кода JavaScript, но следующий код из main.js включает предупреждающие сообщения Bootstrap.

 

define (function (require) {
  require (['jquery', 'bootstrap / alert'], function () {
    $ ('. предупреждение'). предупреждение ();
  });
});  

А как насчет кода JavaScript из других пакетов, спросите вы? Я добавил запись в опцию paths в app.js , а затем потребовал ее внизу файла.

 

require.config ({
  paths: {
    
    acmeuser: '../../acmeuser/js',
  },
  shim: {
    
  },
});

require (['основной', 'acmeuser / main']);  

Для main.js из AcmeUserBundle теперь могут потребоваться другие модули.

 

define (function (require) {
  require (['jquery'], function () {
    $ ('. предупреждение'). addClass ('привет-мир');
  });
});  

Создание JavaScript

На самом деле, в моей текущей настройке я не создаю файлы JavaScript.Поскольку я использую RequireJS, мне не нужно их объединять; Я просто копирую их в web / js / .

 

gulp.task ('js', function () {
  глоток
    .src ([
      './web/bundles/*/js/**/*.js',
      './web/components/bootstrap-sass-official/assets/javascripts/bootstrap/*.js',
      './web/components/jquery/dist/jquery.js',
      './web/components/requirejs/require.js',
    ])
    .pipe (gulp.dest ('./ web / js'));
});  

Наблюдение и перезарядка

Выполнение задач sass и js каждый раз при изменении кода Sas или JavaScript может стать утомительным занятием.Поэтому Gulp, как и большинство современных инструментов сборки, включает функцию часов. Кроме того, я использую LiveReload для автоматической перезагрузки окна браузера при изменении CSS или JavaScript.

Наблюдают

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

 

глоток.task ('смотреть', function () {
  var onChange = function (event) {
    console.log ('File' + event.path + 'был' + event.type);
  };
  глоток
    .watch ('./ src / Acme / Bundle / * / Resources / public / sass / ** / *. scss', ['sass'])
    .on ('изменить', onChange);
  глоток
    .watch ('./ src / Acme / Bundle / * / Resources / public / js / ** / *. js', ['js'])
    .on ('изменить', onChange);
});  

Перезарядка

LiveReload - отличный инструмент для перезагрузки окна браузера при изменении файла. Сначала я устанавливаю плагин gulp-livereload, а затем включаю фрагмент в свой макет.Также можно использовать расширение для браузера, но я предпочитаю иметь все, что мне нужно, в репозитории. После установки плагина мне нужно адаптировать код задачи watch , чтобы информировать LiveReload об измененных файлах.

 

var livereload = require ('gulp-livereload');

gulp.task ('смотреть', function () {
  var onChange = function (event) {
    console.log ('File' + event.path + 'был' + event.type);
    
    livereload.changed ();
  };
  
  livereload.listen ();
  глоток
    .смотреть ('./ src / Tvst / Bundle / * / Resources / public / sass / ** / *. scss', ['sass'])
    .on ('изменить', onChange);
  глоток
    .watch ('./ src / Tvst / Bundle / * / Resources / public / js / ** / *. js', ['js'])
    .on ('изменить', onChange);
});  

В макете я проверяю, является ли среда dev , а затем включаю фрагмент LiveReload.

  // src / Acme / Bundle / FrontendBundle / Resources / views / layout.html.twig

  

Выполнение команд PHP

Я использую Gulp также для выполнения специфичных для PHP задач, а PHPUnit и PHP_CodeSniffer - лишь два из них.Поскольку Gulpfile.js - это просто файл JavaScript, запускаемый с использованием Node.js, я могу запускать произвольные команды оболочки.

PHPUnit

Я использую плагин gulp-phpunit Майка Эриксона для запуска PHPUnit с помощью Gulp.

  $ npm install --save-dev gulp-phpunit  

Я использую функцию task () , чтобы создать новую задачу с именем test . Функция src () позволяет мне использовать шаблон глобуса для выбора файлов, которые я хочу протестировать. Если вы используете другую структуру каталогов, вам необходимо адаптировать этот шаблон.

 

var phpunit = (phpunit = require ('gulp-phpunit'));

gulp.task ('тест', function () {
  return gulp.src ('./ src / Acme / Bundle / * / Tests / ** / *. php'). pipe (
    phpunit ('./ bin / phpunit', {
      отладка: ложь,
      конфигурационный файл: './app/phpunit.xml',
    })
  );
});  

Я могу выполнить задачу с помощью gulp test . Плагин gulp-phpunit предоставляет широкий спектр возможностей.Я также создаю отчет о покрытии кода.

 

gulp.task ('покрытие', function () {
  return gulp.src ('./ src / Tvst / Bundle / * / Tests / ** / *. php'). pipe (
    phpunit ('./ bin / phpunit', {
      отладка: ложь,
      конфигурационный файл: './app/phpunit.xml',
      охватHtml: './build/coverage',
    })
  );
});  

PHP_CodeSniffer

Для запуска PHP_CodeSniffer я использую плагин gulp-phpcs Дмитрия С. Симушева.

 

var phpcs = require ('gulp-phpcs');

глоток.task ('checkstyle', function () {
  ответный глоток
    .src (['src / Tvst / Bundle / ** / *. php'])
    .pipe (phpcs ({bin: './bin/phpcs', стандарт: 'PSR2', warningSeverity: 0}))
    .pipe (phpcs.reporter ('журнал'));
});  

Я также создал ярлык для выполнения покрытия и checkstyle .

 

gulp.task ('проверить', ['покрытие', 'checkstyle']);  

Команды Symfony2

В процессе сборки мне также нужно запускать команды Symfony2.Вместо плагина я использую модуль child_process , который поставляется с Node.js, для выполнения команд Shell. Поскольку Gulpfile состоит из простого кода JavaScript, нет необходимости использовать конкретный плагин.

 

var exec = require ('child_process'). exec;

gulp.task ('installAssets', function () {
  exec ('php app / console assets: install --symlink', logStdOutAndErr);
});


var logStdOutAndErr = function (err, stdout, stderr) {
  console.log (stdout + stderr);
};  

Как видите, я создал задачу Gulp для выполнения команд установки ресурсов.Я могу интегрировать эту задачу в другие задачи и, таким образом, не забуду запустить ее при создании своих активов. В моем Gulpfile у меня также есть задачи по загрузке фикстур и обновлению схемы базы данных.

Дорожная карта

Проект, для которого я использую эту систему сборки, еще не запущен в производство, поэтому кое-чего еще не хватает. Прежде всего, я не добавил минификацию CSS и JavaScript в Gulpfile. Другая проблема, с которой я столкнулся при текущей настройке, заключается в том, что каталоги components / и bundles / находятся в web / и доступны пользователям.Перед запуском в производство я хочу переместить эти два каталога в другое место.

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

В моем Gulpfile все еще отсутствуют некоторые другие мелочи. Например, я хочу использовать CSSComb для сортировки свойств в таблицах стилей, и я хочу интегрировать Autoprefixer для автоматического добавления префиксов поставщиков в свойства CSS.Также отсутствует линтинг кода Sass и JavaScript.

Заключение

Я доволен своей текущей настройкой Gulp. Как упоминалось выше, в нем отсутствуют некоторые функции, которые мне нужно добавить перед запуском в производство. Система сборки быстрая, гибкая и (надеюсь) хорошо масштабируется. Это не полностью автоматический процесс, мне нужно добавить немного конфигурации при создании нового пакета, но это случается не часто, и в этих случаях я предпочитаю контроль над автоматизацией.

Система оценена, и она хорошо работает в моей настройке и структуре моего проекта.Если вы приняли другое решение относительно структуры или вам нужны другие функции, могут возникнуть проблемы. Тем не менее я рад отзывам о моей системе. Я новичок в Gulp и не использовал его в производственном проекте, поэтому предложения приветствуются.

Обновления

Как настроить рабочий процесс с помощью Gulp v4.0.0 | автор: Jatin Varlyani

После того, как я установил Gulp, я зашел в реестр плагинов Gulp, просмотрел 3694+ плагинов и выбрал те, которые могут помочь моему рабочему процессу.Я решил использовать sass и синхронизацию браузера, что было очень полезно.

Первый шаг - создать файл package.json , набрав команду

 $ npm init 

Затем добавьте детали - пример показан ниже:

Теперь, чтобы установить необходимые зависимости, введите следующую команду.

 $ npm install -  save-dev gulp-postcss autoprefixer cssnano gulp-sourcemaps gulp browser-sync gulp-sass  

Мы определили start как «gulp» в пакете .json , так как мы хотим запустить команду gulp на npm start .

Теперь создайте файл gulp.js в корне проекта. В этом файле мы пишем команды для использования Gulp

. Поскольку мы не хотим снова и снова использовать var , мы разделяем объявления переменных запятыми.

Теперь давайте создадим путь для источника и назначения внутри одного файла.

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

Оставить комментарий

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

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