Тёмный

#4 Gulp сборка проекта | sass, stylelint 

Фронтендер
Подписаться 3,1 тыс.
Просмотров 2,8 тыс.
50% 1

Опубликовано:

 

23 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 18   
@Фронтендер-з6о
@Фронтендер-з6о 3 года назад
Таймкоды: 0:00​ Интро 0:13​ gulp-sass 3:38​ gulp-autoprefixer 5:39​ gulp-group-css-media-queries 6:29​ gulp-clean-css 7:54​ gulp-rename 8:50​ gulp-sourcemaps 12:09​ stylelint 14:01​ stylelint-order 17:05​ Добавляем stylelint в lint-staged
@МашаСоколовская-п4м
[20:51:56] The following tasks did not complete: default, , watchFiles, browserSync, , css, images, fonts [20:51:56] Did you forget to signal async completion? D:\WEB\projects\WAWE_gulp ode_modules x\dist x.js:77 throw e; ^ TypeError: Cannot read property 'sockets' of undefined at EventEmitter.browser:reload (D:\WEB\projects\WAWE_gulp ode_modules\browser-sync\dist\internal-events.js:20:19) и ещё очень много строчек :(
@Фронтендер-з6о
@Фронтендер-з6о 3 года назад
@@МашаСоколовская-п4м Привет! В описании есть ссылка, если поставить мою сборку ошибка продолжается?
@EugeneKh.
@EugeneKh. Год назад
На странице stylelint-scss npm-пакета есть ремарка, что лучше использовать stylelint-config-standard-scss, который уже включает в себя оный, если вы не собираете набор правил с нуля под свои цели, т.к. там нет танцев с бубном с ошибками эт-рулов. Также предостерегу, что расширение stylelint может не подсвечивать ошибки сразу после установки, стоит внести правки файл с настройками IDE, а именно: "css.validate": false, - отключает нативную валидацию "scss.validate": false, - // - "stylelint.validate": [ "css", "scss", ] - правила для стайлинта какие языки линтировать Все это применимо и к другим css-подобным языкам. Для тех, кто любит заморочится (Как я), стоит еще дописать правила порядка очередности вложенных выражений ( типа медиа - модификаторы по бэм - псведоклассы - псевдоэл-ты.. и т.д.) Хорошей практикой будет запретить переопределение селекторов в медиа запросах, установить макс глубину нестинга А супер круто сделать два конфига под линтер, один который будет проверять только те правила, которые требуют ручного исправления и использоать его по дэфолту, а для хаски сдлеать extended, который запускать с фагом --fix и он будет не только линтить по расширеному набору правил, но и фиксить очередность css-правил Черпал инфу тут blog.csssr.com/ru/article/lint-your-css/
@ИринаГончарова-м8к
Спасибо за урок
@ShortsPageTech
@ShortsPageTech 3 года назад
Просто Супер
@evgeniidianov164
@evgeniidianov164 3 года назад
урааа ты вернулсяяяя!
@mirrror7152
@mirrror7152 3 года назад
ООООО спасибо
@onthelimit1666
@onthelimit1666 3 года назад
Спасибо, всё было очень круто до sass, но придётся отказаться от вашей сборки из-за невозможности подключения sass, в доках подключение сейчас выглядит так: var sass = require('gulp-sass')(require('sass')); пытался лечить, не получается. Пробовал import gulpSass from "gulp-sass"; import nodeSass from "node-sass"; const sass = gulpSass(nodeSass); Не помогло. Вот такая ошибка (npm ERR! code ELIFECYCLE npm ERR! errno 1), как я понимаю - это нода ругается. Дальше мои полномочия всё
@Фронтендер-з6о
@Фронтендер-з6о 3 года назад
Привет! Да, инструменты быстро обновляются и теперь так не будет работать, надо использовать новый способ подключения, либо поставить старую версию. Но сам смысл остается одним и тем же
@Фронтендер-з6о
@Фронтендер-з6о 2 года назад
​@Дмитрий Самарин Привет! github.com/dlmanning/gulp-sass#importing-it-into-your-project
@constantinem.8269
@constantinem.8269 3 года назад
Привет! Скажи, есть ли какой-нибудь инструмент для scss, который может упорядочить свойства в правильном порядке?
@Фронтендер-з6о
@Фронтендер-з6о 3 года назад
Привет! Лично я не пользовался, поэтому не могу подсказать. Попробуй гуглить в сторону order css plugin [название редактора кода] css plugin for sorting properties и тд
@Notjozeffie
@Notjozeffie 2 года назад
Можешь использовать Prettier
@СергейИахин
@СергейИахин 3 года назад
А как вы без шаблонизатора верстаете?
@Фронтендер-з6о
@Фронтендер-з6о 3 года назад
Привет! В основном чистый html не использую. Либо шаблонизаторы по типу pug, либо использую фреймворки
Далее
Ozoda - Lada (Official Music Video)
06:07
Просмотров 6 млн
100+ Web Development Things you Should Know
13:18
Просмотров 1,5 млн
iPhone 16/16 Pro Review: Times Have Changed!
20:41
Просмотров 2,8 млн
Coding Was HARD Until I Learned These 5 Things...
8:34
Ozoda - Lada (Official Music Video)
06:07
Просмотров 6 млн