Редактирование стилей для платформ CSS-in-JS
На вкладке Стили можно скопировать объявления для правила стиля таким образом, чтобы он был отформатирован для JavaScript и готов к вставке в файл JavaScript. Сюда входят правила стиля, определенные вызовами функций CSS-in-JS. Вы также можете изменять правила стиля, которые изначально были определены вызовом функции CSS-in-JS.
Копирование объявлений правил стилей для их вставки с помощью синтаксиса JavaScript
В области Стили можно скопировать объявления для правила стиля таким образом, чтобы он был отформатирован для JavaScript и готов к вставке в файл JavaScript.
При использовании библиотек CSS-in-JS можно скопировать объявления CSS (свойство и значение CSS), чтобы они автоматически форматировались для JavaScript. Вам не нужно вручную изменять скопированный CSS в соответствии с синтаксисом JavaScript. Вы можете скопировать одно объявление CSS или все объявления в правиле стиля, а затем вставить их непосредственно в файл JavaScript без проблем с синтаксисом.
Чтобы скопировать правило стиля как JavaScript, выполните следующие действия:
- В DevTools откройте инструмент Элементы и перейдите на вкладку Стили .
- Щелкните правой кнопкой мыши объявление в правиле стиля и выберите Копировать объявление как JS или Копировать все объявления как JS.
- Вставьте скопированный CSS-файл в файл JavaScript в текстовом редакторе, например Visual Studio Code. Пример: ‘—more-link’: ‘lime’ .
Дополнительные сведения о просмотре и изменении CSS см. в справочнике по функциям CSS.
Изменение правил стиля, изначально определенных функцией CSSOM
Панель «Стили» поддерживает редактирование стилей, созданных с помощью API-интерфейсов CSS Object Model (CSSOM). Многие платформы и библиотеки CSS-in-JS используют API объектной модели CSS для создания стилей.
Вы можете изменять стили, добавленные в JavaScript, с помощью CSSStyleSheet интерфейса , который является способом создания и распространения повторно используемых стилей при использовании Теневой модели DOM. См. раздел Интерфейс CSSStyleSheet в объектной модели CSS (CSSOM).
Пример
В этом примере кода правила стиля сначала определяются путем вызова функции CSS Object Model (CSSOM), а затем правила стиля редактируются с помощью области Стили . Объект CSSStyleSheet содержит API CSSOM, например insertRule() . Стили h1 , которые были изначально добавлены CSSStyleSheet функцией, затем можно редактировать в области Стили .
//Add CSS-in-JS button function addStyle() < const sheet = new CSSStyleSheet(); sheet.insertRule(`h1 < background: pink; text-transform: uppercase; >`); document.adoptedStyleSheets = [sheet]; > В этом примере показано изменение background свойства стилей h1 , добавленных функцией insertRule() объектной модели CSS . Цвет background сначала задается путем вызова функции объектной модели CSS, а затем его можно изменить с pink lightblue на с помощью области Стили .
Что такое CSS-in-JS?
Этот раздел является фрагментом из записи блога о поддержке CSS-in-JS в DevTools.
Вот что мы имеем в виду под CSS-in-JS и чем он отличается от обычного CSS. Определение CSS-in-JS несколько расплывчато. В широком смысле это подход к управлению кодом CSS с помощью JavaScript. Например, это может означать, что содержимое CSS определяется с помощью JavaScript, а конечные выходные данные CSS создаются приложением на лету.
В контексте средств разработки CSS-in-JS означает, что содержимое CSS внедряется на страницу с помощью API объектной модели CSS. Обычный CSS внедряется с помощью элементов или и имеет статический источник (например, узел DOM или сетевой ресурс). Напротив, CSS-in-JS часто не имеет статического источника.
Особый случай здесь заключается в том, что содержимое элемента может быть обновлено с помощью API объектной модели CSS, что приводит к тому, что источник перестает синхронизироваться с фактической таблицей стилей CSS.
Если вы используете любую библиотеку CSS-in-JS (например, styled-component, Emotion или JSS), библиотека может внедрять стили с помощью API объектной модели CSS в зависимости от режима разработки и браузера.
Давайте рассмотрим некоторые примеры того, как можно внедрить таблицу стилей с помощью API объектной модели CSS, аналогичному подходу, используемому некоторыми библиотеками CSS-in-JS.
// Insert new rule to an existing CSS stylesheet const element = document.querySelector('style'); const stylesheet = element.sheet; stylesheet.replaceSync('.some < color: blue; >'); stylesheet.insertRule('.some < color: green; >'); Вы также можете создать совершенно новую таблицу стилей:
// Create a completely new stylesheet const sheet = new CSSStyleSheet(); stylesheet.replaceSync('.some < color: blue; >'); stylesheet.insertRule('.some < color: green; >'); // Apply constructed stylesheet to the document document.adoptedStyleSheets = [. document.adoptedStyleSheets, sheet]; Поддержка CSS в средствах разработки
В средствах разработки наиболее часто используемым компонентом при работе с CSS является область Стили . В области Стили можно просмотреть, какие правила CSS-in-JS применяются к конкретному элементу. Вы также можете изменять правила CSS-in-JS и просматривать изменения на странице в режиме реального времени.
Панель Стили поддерживает правила CSS, которые можно изменить с помощью API объектной модели CSS. Стили CSS-in-JS иногда описываются как созданные, чтобы указать, что эти стили были созданы с помощью веб-API.
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинальная страница находится здесь и автор Алекс Руденко (Технический писатель, Chrome DevTools & Lighthouse).
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.
Как подключить шрифт к сайту с помощью CSS и не только
Шрифты — одна из базовых вещей, которые используются при разработке сайта. Наряду с картинками, файлами css, js — шрифты незаменимый элемент современного сайта. Поэтому часто у верстальщиков (и не только) возникает вопрос — как подключить шрифт к сайту? И как это можно сделать с помощью css. Давайте разберемся с различными вариантами подключения шрифта к html странице.
Важное уточнение
Не все сайты работают одинаково. Поэтому некоторые методы не будут актуальны для решения вашей задачи. Это статья больше ориентирована на людей, которые сталкивались с HTML и CSS, а также имеют возможность редактировать файлы на своем сайте.
Подключение с помощью CSS через @font-face
В CSS есть такое правило font-face, которое позволяет подключить нужный шрифт к сайту.
Пример подключения шрифта через font-face:
@font-face < font-family: 'MyFont'; src: url(../fonts/MyFont.ttf') format('truetype'); >Давайте разберем синтаксис. Что мы только что сделали. Построчно.
font-family — задали название нашего шрифта. Затем, когда мы захотим, например, задать всем h1 этот шрифт, достаточно в CSS прописать следующее:
Далее src. С помощью этого свойства мы указываем путь к нашему шрифту. В нашем конкретном случае файл MyFont.ttf находится в папке fonts, которая на один уровень выше от нашего css файла, в котором и выполняется данный код. Можно также указать url-адрес, по которому доступен шрифт.
Помимо src есть еще свойство local. Мы можем сказать браузеру, чтобы он искал на локальном компьютере пользователя определенный шрифт. Это может сократить время загрузки страницы, если у пользователя будет на компьютере установлен текущий шрифт.
Кстати, мы можем задать сразу несколько форматов одного и того же шрифта (для лучшей поддержки в различных браузерах):
@font-face < font-family: 'MyFont'; src: url('webfont.eot'); /* Поддерживается в IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Для супер современных браузеров */ url('webfont.woff') format('woff'), /* Для супер современных браузеров */ url('webfont.ttf') format('truetype'), /* Для Сафари, Андроид, iOS и почти всех других */ url('webfont.svg#svgFontName') format('svg'); /* Для iOS */ >Браузер сам выберет нужный ему шрифт. Список доступных форматов: «woff», «woff2», «truetype», «opentype», «embedded-opentype», и «svg».
Если вы хотите подключить несколько разных шрифтов, то можете несколько раз использовать @font-face.
Как подключить шрифт с Google Fonts
Довольно часто нужный шрифт находится в популярной библиотеке Google Fonts.
Подключить шрифт с Google Fonts на сайт можно разными методами.
Например, вы можете сказать понравившийся шрифт и затем добавить его с помощью @font-face, о которой я рассказал вам выше.
Также есть еще варианты.
Находите нужный вам шрифт.
Выбираете нужное начертание (font-weight):
Затем, в правом верхнем углу нажимайте на иконку «View selected families»:
У вас появится окно, где вы можете выбрать способ, как добавить шрифт на сайт: через link или @import. Link (выбрано по умолчанию) — вам достаточно копировать код и вставить внутри тега (1 на изображении ниже). Далее, вы можете задавать элементам нужный шрифт с помощью CSS (2 на изображении ниже).
Вариант с @import ничем не отличается, однако, если вы уберете в коде, который предлагается скопировать, то можете вставлять @import прямо в главный css файл. Вариант с @import позволяет быть более гибким, однако, требует больше внимания.
Если вы прочитали статью, а шрифт все еще не подключается, то пишите в комментариях — мы рассмотрим ваш код вместе.
Практическое руководство по использованию CSS Modules в React приложениях
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen.
В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
Проблема с каскадами
Давайте создадим повторно используемый компонент select в качестве примера, иллюстрирующего проблемы глобальных стилей. Стилизация элемента напрямую — это плохое решение, поскольку в других местах сайта нам может потребоваться или изначальный нестилизованный элемент, или совсем другая его стилизация. Вместо этого можно использовать синтаксис БЭМ для определения классов:
.select <> .select__item <> .select__item__icon <> .select--loading <>Если бы новый класс item был создан без префикса select__, то у всей команды могли бы возникнуть проблемы, если бы кто-нибудь захотел использовать такое же имя item. При этом неважно, разработчик ли пишет CSS или же его генерирует какая-то утилита. Использование БЭМ помогает решить эту проблему, вводя контекст для элемента select.
Синтаксис БЭМ является шагом вперёд по направлению к компонентам, так как «Б» в БЭМ расшифровывается как «Блок», а блоки можно интерпретировать как легковесные компоненты. Select — это компонент, у которого есть различные состояния (select—loading) и потомки (select__item).
К несчастью, использование соглашений по именованию и мышление в терминах компонентов не решает всех проблем селекторов. Коллизии имён всё ещё не гарантированы, а семантическая избыточность имён увеличивает риск опечаток и требует дисциплинированной команды, где каждый на все сто процентов понимает соглашения. Опечатки включают в себя использование одного дефиса вместо двух, путаницу между модификатором (—) и блоком (__) и прочее.
CSS Modules спешат на помощь
«CSS модуль» определяется следующим образом:
CSS модуль — это CSS файл, в котором все имена классов и анимаций имеют локальную область видимости по умолчанию.
Ключевая идея здесь — локальная область видимости.
Чтобы проиллюстрировать эту концепцию, давайте создадим JavaScript и CSS файлы компонента.
/* select.css */ .select <> .loading <> .item <> .icon <>/* select.js */ import styles from "./select.css"; console.log(styles.select, styles.loading);Это простой пример, который, однако, содержит много всего, происходящего за сценой.
Теперь CSS файл содержит намного меньше шума, чем в БЭМ версии, потому что в нём больше нет префиксов и специальных символов, задающих контекст. Почему же стало возможным удалить префикс .select—, не создавая при этом проблем?
Оператор import в JavaScript файле загружает CSS файл и конвертирует его в объект. В следующем разделе мы рассмотрим, как настроить рабочее окружение, позволяющее импортировать CSS файлы.
Каждое имя класса из CSS файла является свойством объекта. В примере выше это styles.select, styles.icon и т. д.
Если имя свойства — это имя класса, то какое же значение у этого свойства? Это уникальное имя класса, и уникальность обеспечивает то, что стили не «протекают» в другие компоненты. Вот пример хешированного имени класса: _header__1OUvt.
Вы можете подумать: «Какой ужас!» В чём смысл изменения осмысленного имени класса на непонятный хеш? Основная причина в том, что такой идентификатор гарантированно является уникальным в глобальном контексте. Позднее в этом руководстве мы изменим механизм создания идентификаторов, так что они будут иметь более осмысленный вид, но при этом останутся уникальными.
Вот ключевые преимущества использования CSS с локальной областью видимости:
- шаг вперёд по направлению к модульным и повторно используемым компонентам без побочных эффектов,
- более чистый CSS,
- избегание монолитных CSS файлов, так как у каждого компонента будет свой файл со стилями.
- сложнее читать и понимать DOM,
- требуется некоторая начальная настройка окружения, чтобы заставить всё это работать.
Для простоты в этой статье мы остановимся на сборщике модулей Webpack и библиотеке React.
React, Webpack и CSS Modules
Для быстрого создания приложения можно использовать Create React App.
Следуя инструкциям в документации, мы создадим и запустим новый проект практически мгновенно.
npm install -g create-react-app create-react-app css-modules cd css-modules/ npm start Вуаля, и у нас работающее React приложение:
Начальная страница сообщает нам, что нужно редактировать файл App.js.
import React, < Component >from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component < render() < return ( 
className="App-logo" alt="logo" /> Welcome to React
To get started, edit and save to reload.
); > > export default App;Используются ли CSS Modules в Create React App? Это можно узнать, взглянув на файл App.js. CSS файл импортируется, но не присваивается никакой переменной, при этом во всех атрибутах className используются строки вместо динамических значений.
С этой точки зрения Create React App не поддерживает CSS Modules, так что нужно изменить конфигурацию, чтобы включить эту поддержку.
Настройка Create React App для поддержки CSS Modules
Чтобы получить доступ к скрытому конфигу сборки, нужно выполнить команду eject. Внимание: если вы сделали это, то вернуться обратно вы уже не сможете.
npm run eject Теперь можно открыть папку с конфигами для webpack:
Create React App использует webpack для сборки, поэтому webpack.config.dev.js — тот самый файл, который нужно изменить (а также webpack.config.prod.js для настроек продакшна — прим. переводчика).
Найдём раздел, задающий, что делать с CSS файлами (в оригинальной статье используется старый синтаксис конфигов webpack, здесь же я использовал новый — прим. переводчика):
< test: /\.css$/, use: [ require.resolve('style-loader'), < loader: require.resolve('css-loader'), options: < importLoaders: 1, >, >, < loader: require.resolve('postcss-loader'), options: < // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () =>[ require('postcss-flexbugs-fixes'), autoprefixer(< browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', >), ], >, >, ], >,Когда мы изменим этот раздел, как показано ниже, то это на мгновение разрушит стилизацию сайта, поскольку будет включена поддержка CSS Modules, но требуются ещё изменения в самом компоненте. При изменении конфига webpack, можно изменить правило именования CSS классов, чтобы в них была и читаемая часть, и хеш для обеспечения уникальности:
< test: /\.css$/, use: [ require.resolve('style-loader'), < loader: require.resolve('css-loader'), options: < importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" >, >, < loader: require.resolve('postcss-loader'), options: < // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () =>[ require('postcss-flexbugs-fixes'), autoprefixer(< browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', >), require('postcss-modules-values'), ], >, >, ], >,Что делают эти загрузчики loaders? В файле webpack.config есть закомментированная секция, описывающая загрузчики стилей и CSS:
postcss-loader применяет autoprefixer к CSS.
style-loader преобразовывает CSS в JS модули, которые инжектят теги .
css-loader разрешает пути в CSS и добавляет ресурсы как необходимые зависимости.
Опция modules: true в настройках css-loader включает поддержку CSS Modules. Параметр localIdentName изменяет шаблон имени класса таким образом, что оно включает в себя имя компонента React, имя класса и уникальный хеш-идентификатор. Это позволит производить отладку намного легче, потому что легко можно идентифицировать все компоненты.
Использование CSS Modules в React
Можно проверить, что конфигурация работает, добавив вызов console.log после оператора import.
Заменяя import ‘./App.css’; на
import styles from './App.css'; console.log(styles); мы получаем следующий вывод в консоль браузера:
Сейчас классы уникальны, но они не используются в React компонентах. Нужно сделать ещё два шага, чтобы применить стили к React компонентам. Во-первых, нужно изменить имена классов согласно camelCase нотации. Во-вторых, нужно изменить атрибуты className так, чтобы они использовали импортированные классы.
Использовать camelCase нотацию необязательно, но при доступе к классам из JavaScript легче писать styles.componentName, чем styles[«component-name»].
Исходный файл стилей выглядит так:
.App < text-align: center; >.App-logo < animation: App-logo-spin infinite 20s linear; height: 80px; >.App-header < background-color: #222; height: 150px; padding: 20px; color: white; >.App-intro < font-size: large; >@keyframes App-logo-spin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>Больше нет необходимости в префиксах App, поэтому сейчас хороший момент, чтобы удалить их тоже. Модифицированный CSS будет выглядеть так:
.app < text-align: center; >.logo < animation: logoSpin infinite 20s linear; height: 80px; >.header < background-color: #222; height: 150px; padding: 20px; color: white; >.intro < font-size: large; >@keyframes logoSpin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>Следующий шаг — изменить использование классов в компоненте. Результат будет следующим:
import React, < Component >from 'react'; import logo from './logo.svg'; import styles from './App.css'; class App extends Component < render() < return ( > > className= < styles.logo >alt="logo" /> Welcome to React
> To get started, edit and save to reload.
); > > export default App; Теперь наш компонент использует CSS Modules.
Как нарушить границы CSS модуля, когда это необходимо
Подход, описанный в предыдущем разделе, является основным для React проектов, но разработчики обычно быстро обнаруживают, что им нужен способ выделять и использовать общие стили. В этом контексте «общие» значит лишь то, что компонент должен наследовать что-то от базовых стилей.
Эту общую информацию могут представлять собой переменные (цвета, размеры шрифта, и т. д.), хелперы (миксины SASS) или utility-классы.
CSS Modules дают возможность композиции с помощью ключевого слова from. Композиция возможна и между классами из разных файлов.
В следующем примере имеется два файла: один для базовых стилей кнопки и второй для реализации кнопки Submit. Можно сказать, что класс submitButton должен быть представлен через композицию базовых стилей кнопки и некоторых дополнительных свойств.
/* base_button.css */ .baseButton < border: 2px solid darkgray; background-color: gray; >/* submit_button.css */ .submitButton < composes: baseButton from "./base_button.css"; background-color: blue; >Если есть необходимость в использовании переменных, то можно использовать или препроцессор, например, SASS или Less, или настроить поддержку переменных в webpack.
Пример из документации webpack по переменным в CSS:
/* variables.css */ @value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200; /* demo.css */ /* import your colors. */ @value colors: "./variables.css"; @value blue, red, green from colors; .button
Этот пример можно изменить, используя собственные имена переменных. Это нужно потому, что переопределение стандартных значений, таких как blue, делает CSS файл менее понимаемым, так как больше нельзя быть уверенным, было ли переопределено какое-то значение или нет.
/* variables.css */ @value customBlue: #0c77f8; @value customRed: #ff0000; @value customGreen: #aaf200; /* demo.css */ /* import your colors. */ @value colors: "./variables.css"; @value customBlue, customRed, customGreen from colors; .button
Заключение
В этом руководстве мы начали с рассмотрения проблем глобального CSS, затем увидели, как CSS Modules улучшают ситуацию, вводя область видимости CSS и заставляя нас думать в терминах компонентов. Также мы рассмотрели, как легко можно начать экспериментировать с CSS Modules, используя React Starter Kit.
CSS Modules используются совместно со сборкой всего фронтэнда, то есть, с поддержкой в браузере нет никаких проблем. Браузеры получают обычный CSS от сервера, так что нет никакой возможности «сломать» сайт, используя CSS Modules. Наоборот, при этому мы только повышаем его надёжность, уменьшая количество потенциальных багов. Webpack с загрузчиками, сконфигурированными для поддержки CSS Modules, не создаёт никаких проблем, так что без сомнений можно рекомендовать этот инструмент к использованию.
Если вы использовали CSS Modules в своих проектах, я (то есть, автор оригинальной статьи — прим. переводчика) хотел бы услышать о вашем опыте!
→ Публикация — свободный перевод статьи «Practical Guide to React and CSS Modules». Автор статьи Tatu Tamminen
→ Исходный код можно найти в react-cssmodules-demo
→ Также заслуживает внимания CSS Modules Webpack Demo
Файл .gitignore – как игнорировать файлы и папки в Git
Git – это популярная система контроля версий. Благодаря Git разработчики могут сотрудничать и без проблем работать над проектами совместно.
Git позволяет отслеживать изменения, которые вы вносите в проект с течением времени. Помимо этого, он позволяет вернуться к предыдущей версии, если вы вдруг решили не вносить изменение.
Git работает по следующему принципу: вы размещаете файлы в проекте с помощью команды git add , а затем фиксируете (коммитите) их с помощью команды git commit .
При совместной работе над проектами могут возникнуть ситуации, когда вы не захотите, чтобы какие-то файлы или части проекта были видны всем участникам команды.
Иными словами, вы не захотите включать и фиксировать эти файлы в основной версии проекта. Вот почему вы можете не захотеть использовать разделитель (точку) с командой git add , так как в этом случае каждый отдельный файл будет размещен в текущем каталоге Git.
Когда вы используете команду git commit , то каждый отдельный файл фиксируется – это также добавляет файлы, которые не нужно.
Вы можете, наоборот, захотеть, чтобы Git игнорировал определенные файлы, но для такой цели не существует команды git ignore.
Итак, как же сделать так, чтобы Git игнорировал и не отслеживал определенные файлы? С помощью файла .gitignore .
В этой статье вы узнаете, что такое файл .gitignore , как его создать и как использовать для игнорирования некоторых файлов и папок. Также вы узнаете, как можно заставить Git игнорировать уже закоммиченый файл.
Что такое файл .gitignore? Для чего он нужен?
Каждый из файлов в любом текущем рабочем репозитории Git относится к одному из трех типов:
- Отслеживаемые – это все файлы и каталоги, о которых знает Git. Это файлы и каталоги, которые были недавно размещены (добавлены с помощью git add ) и зафиксированы (закоммичены с помощью git commit ) в главном репозитории.
- Неотслеживаемые – это новые файлы и каталоги, которые созданы в рабочем каталоге, но еще не размещены (или добавлены с помощью команды git add ).
- Игнорируемые – это все файлы и каталоги, которые полностью исключаются и игнорируются, и никто о них в репозитории Git не знает. По сути, это способ сообщить Git о том, какие неотслеживаемые файлы так и должны остаться неотслеживаемыми и не должны фиксироваться.
Все файлы, которые должны быть проигнорированы, сохраняются в файле .gitignore .
Файл .gitignore – это обычный текстовый файл, который содержит список всех указанных файлов и папок проекта, которые Git должен игнорировать и не отслеживать.
Внутри файла .gitignore вы можете указать Git игнорировать только один файл или одну папку, указав имя или шаблон этого конкретного файла или папки. Используя такой же подход, вы можете указать Git игнорировать несколько файлов или папок.
Как создать файл .gitignore
Обычно файл .gitignore помещается в корневой каталог репозитория. Корневой каталог также известен как родительский или текущий рабочий каталог. Корневая папка содержит все файлы и другие папки, из которых состоит проект.
Тем не менее, вы можете поместить этот файл в любую папку в репозитории. Если на то пошло, но у вас может быть несколько файлов .gitignore .
Для того, чтобы создать файл .gitignore в Unix-подобной системе, такой как macOS или Linux, с помощью командной строки, откройте приложение терминала (например, в macOS это Terminal.app ). Затем для того, чтобы создать файл .gitignore для вашего каталога, перейдите в корневую папку, которая содержит проект, и при помощи команды cd введите следующую команду:
touch .gitignore
Файлы, перед именем которых стоит точка . , по умолчанию скрыты.
Скрытые файлы нельзя просмотреть, используя только команду ls . для того, чтобы иметь возможность просмотреть все файлы, включая скрытые, используйте флаг -a с командой ls следующим образом:
ls –a
Что добавлять в файл .gitignore
В файл .gitignore должны быть добавлены файлы любого типа, которые не нужно фиксировать.
Вы можете не хотеть их фиксировать из соображений безопасности или потому, что они нужны только вам и не нужны другим разработчикам, работающим над тем же проектом, что и вы.
Вот некоторые файлы, которые могут быть включены:
- Файлы операционной системы. Каждая операционная система, будь то macOS, Windows или Linux, создает системные скрытые файлы, которые не нужны другим разработчикам, так как их система создает такие же файлы. Например, в macOS Finder создает файл .DS_Store , который содержит пользовательские настройки внешнего вида и отображения папок, такие как размер и положение иконок.
- Файлы конфигурации, создаваемые такими приложениями, как редакторы кода и IDE (Integrated Development Environment – интегрированная среда разработки). Эти файлы настроены под вас, ваши конфигурации и ваши настройки, например папка .idea .
- Файлы, которые автоматически генерируются языком программирования или средой разработки, которую вы используете для своего проекта, и в процессе компиляции специфичных для кода файлов, такие как файлы .o .
- Папки, созданные диспетчерами пакетов, например, папка npm node_modules . Это папка, которая используется для сохранения и отслеживания зависимостей для каждого пакета, который вы устанавливаете локально.
- Файлы, которые содержат конфиденциальные данные и личную информацию. Примерами таких файлов могут послужить файлы с вашими учетными данными (имя пользователя и пароль) и файлы с переменными среды, такие как файлы .env (файлы .env содержат ключи API, которые должны оставаться защищенными и закрытыми).
- Файлы среды выполнения, такие как файлы .log . Они предоставляют информацию об использовании операционной системы и ошибках, а также историю событий, произошедших в рамках ОС.
Как игнорировать файл или папку в Git
Если вы хотите игнорировать только один конкретный файл, то вам необходимо указать полный путь к файлу из корневой папки проекта.
Например, если вы хотите игнорировать файл text.txt , который расположен в корневом каталоге, то вы должны сделать следующее:
/text.txt
А если вы хотите игнорировать файл text.txt , который расположен в папке test корневого каталоге, вы должны сделать следующее:
/test/text.txt
Вы можете это записать иначе:
test/text.txt
Если вы хотите игнорировать все файлы с определенным именем, то вам нужно написать точное имя файла.
Например, если вы хотите игнорировать любые файлы text.txt , то вы должны добавить в .gitignore следующее:
text.txt
В таком случае вам не нужно указывать полный путь к конкретному файлу. Этот шаблон будет игнорировать все файлы с таким именем, расположенные в любой папке проекта.
Для того, чтобы игнорировать весь каталог со всем его содержимым, вам нужно указать имя каталога со слешем в конце:
test/
Эта команда позволит игнорировать любой каталог (включая другие файлы и другие подкаталоги внутри каталога) с именем test , расположенный в любой папке вашего проекта.
Стоит отметить, что если вы напишете просто имя каталога без слеша, то этот шаблон будет соответствовать как любым файлам, так и любым каталогам с таким именем:
# соответствует любым файлам и каталогам с именем test test
Что делать, если вы хотите игнорировать любые файлы и каталоги, которые начинаются с определенного слова?
Допустим, вы хотите игнорировать все файлы и каталоги, имя которых начинается с img . Для этого вам необходимо указать имя, а затем селектор подстановочного символа * :
Эта команда позволит игнорировать все файлы и каталоги, имя которых начинается с img .
Но что делать, если вы хотите игнорировать любые файлы и каталоги, которые заканчиваются определенным набором символов?
Если вы хотите игнорировать все файлы с определенным расширением, то вам необходимо будет использовать селектор подстановочного знака * , за которым последует расширение файла.
Например, если вы хотите игнорировать все файлы разметки, которые заканчиваются расширением .md , то вы должны в файл .gitignore добавить следующее:
Этот шаблон будет соответствовать любому файлу с расширением .md , расположенному в любой папке проекта.
Мы разобрали, как игнорировать все файлы, которые оканчиваются одинаково. Но что делать, если вы хотите сделать исключение для одного из этих файлов?
Допустим, вы добавили в свой файл .gitignore следующее:
Этот шаблон позволит игнорировать все файлы, оканчивающиеся на .md , но вы, например, не хотите, чтобы Git игнорировал файл README.md .
Для этого вам нужно будет воспользоваться шаблоном с отрицанием (с восклицательным знаком), чтобы исключить файл, который в противном случае был бы проигнорирован, как и все остальные:
# игнорирует все файлы .md .md # не игнорирует файл README.md !README.md
Учитывая эти два шаблона в файле .gitignore , все файлы, оканчивающиеся на .md будут игнорироваться, кроме файла README.md .
Стоит отметить, что данный шаблон не будет работать, если вы игнорируете весь каталог.
Допустим, что вы игнорируете все каталоги test :
test/
И допустим, внутри папки test у вас есть файл example.md , который вы не хотите игнорировать.
В этом случае вы не сможете сделать исключение для файла внутри игнорируемого каталога следующим образом:
# игнорировать все каталоги с именем test test/ # попытка отрицания файла внутри игнорируемого каталога не сработает !test/example.md
Как игнорировать ранее закоммиченый файл
Лучше всего создать файл .gitignore со всеми файлами и различными шаблонами файлов, которые вы хотите игнорировать, при создании нового репозитория, до его коммита.
Git может игнорировать только неотслеживаемые файлы, которые еще не были зафиксированы в репозитории.
Что же делать, если вы уже закоммитили файл, но хотели бы, чтобы он все-таки не был закоммичен?
Допустим, что вы случайно закоммитили файл .env , в котором хранятся переменные среды.
Для начала вам необходимо обновить файл .gitignore , чтобы включить файл .env:
# добавить файл .env в .gitignore echo ".env" >> .gitignore
Теперь, вам нужно указать Git не отслеживать этот файл, удалив его из перечня:
git rm --cached .env
Команда git rm вместе с параметром —cached удаляет файл из репозитория, но не фактический файл. Это значит, что файл остается в вашей локальной системе и в вашем рабочем каталоге в качестве файла, который игнорируется.
Команда git status покажет, что файла в репозитории больше нет, в ввод команды ls покажет, что файл существует в вашей локальной файловой системе.
Если вы хотите удалить файл из репозитория и вашей локальной системы, то не используйте параметр —cached .
Затем добавьте .gitignore в область подготовленных файлов с помощью команды git add :
git add .gitignore
И наконец, закоммитте файл .gitignore с помощью команды git commit :
git commit -m "update ignored files"
Заключение
Вот и все – теперь вы знаете, как игнорировать файлы и папки в Git.