Подскажите пожалуйста новичку как использовать framework simantic ui? Установил в корень диска С:/ вместе с GULP. Не могу понять теперь как эту кучу хлама использовать. Пишут что эти инструменты облегчают труд разработчика. Есть ли какие то плагины визуализации проекта?
Вот тут на английском расписано Getting Started | Semantic UI. Скорее всего тебе интересна секция workflow.
Скользкая тема. Любой созданный инструмент облегчает труд разоаботчика. Но есть вопросы, которые не освящаются пропагандистами того или иного инструмента:
- какие требования к знаниям чтобы начать пользоваться инструментом
- какие конкретно проблемы/задачи решаются инструментом. Есть ли у тебя эти проблемы/задачи, и главное - надо ли тебе их решать.
- какие ограничения у инструмента.
эти вопросы нужно задавать себе самому, и на их исновании решать нужен ли тебе инструмент или нет.
Что значит “визуализация”? Опиши как выглядит результат визуализации.
Чтобы можно было редактировать код и сразу же динамически менялось содержимое визабилити html/css, предполагаю для этого же и создаётся куча java script файлов.
Если нужно только автоматическое обновление после изменений файлов, я бы советовал такую комбинацию: serve
+ live.js
. serve
запускает локальный http сервер, а live.js
опрашивает этот сервер и обновляет страницу каждый раз когда изменяется файл стилей, скриптов или html.
Сначала установи serve
глобально. После этого в командной строке появится команда serve
.
npm install serve -g
в папке проекта создай index.html
, подключи в него все скрипты/стили которые будешь менять, и еще подключи livejs
.
<script src="http://livejs.com/live.js"></script>
и теперь в командной строке перейди в папку в которой лежит эта html-ка и запусти
serve
Обрати внимание по какому адресу запустился сервер (если работаешь на винде, то тебя могут спросить о разрешении для nodejs принимать соединения - соглашайся).
Открой в браузере адрес из консоли (обычно http://localhost:5000
)
Теперь если ты изменишь какой-то из подключенных файлов в index.html
, или сам этот файл, то страница браузера перезагрузится.
НО
Но если тебе нужны препроцессоры (например less
, или jsx
для реакта), то мой подход неудобен. Он работает хорошо если ты работаешь только с чистыми html-css-js.
Не будет проблем, например, если подключишь файлы jquery или bootstrap, потому что они - простые css-js файлы.
А как работать c less(визуализировать)? Я так понимаю что должен быть визуальный конструктор который пере записывает CSS и правила JS
Тут начинается другая история. less - это язык, который компилируется (транспайлируется) в css. С тем подходом, который я описал выше, работать с less будет неудобно.
Меняем стратегию.
Возьми parcel
- это такая штука, которая компилирует less в css, jsx в javascript, и умеет не только такие преобразования. Плюс умеет перезагружать страницу когда изменился оди из измененных файлов.
Установка
npm install parcel-bundler -g
Это добавит команду parcel
в командной строке.
Создай файл index.html
, подлючи в него скрипты. Допустип твой главный js файл называется main.js
. А теперь фишка. Ты можешь написать будто подключаешь less файл как зависимость в скрипте.
// файл main.js
require('main.less')
// обычный джаваскрипт
И запусти parcel
parcel index.html
В консоли увидишь какой адрес открыть в браузере чтобы увидеть результаты.
Все. Теперь когда ты будешь менять файлы, браузер будет перезагружать страницу с результатами. И что круто, что эта же тулзовина преобразует less в css, а если ты решишь использовать другие преобразователи кода/компиляторы, то их будет проще настроить. И самое главное - parcel
умеет делать билд для продакшена. Т.е. минифицированный скрипт и стиль который только остается подключить в браузере в конечном продукте. Читай в доке https://parceljs.org/cli.html