Что такое html препроцессоры простыми словами

Что такое html препроцессоры простыми словами

PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor ) — это распространённый язык программирования общего назначения с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML.

Простой ответ, но что он может означать? Вот пример кода:

Пример #1 Пример программирования на PHP

Вместо рутинного вывода HTML-кода командами языка (как это происходит, например, в Perl или C), скрипт PHP содержит HTML с встроенным кодом (в нашем случае, это вывод текста «Привет, я — скрипт PHP!»). Код PHP отделяется специальными начальным и конечным тегами , которые позволяют «переключаться» в «PHP-режим» и выходить из него.

PHP отличается от JavaScript тем, что PHP-скрипты выполняются на сервере и генерируют HTML, который посылается клиенту. Если бы у вас на сервере был размещён скрипт, подобный вышеприведённому, клиент получил бы только результат его выполнения, но не смог бы выяснить, какой именно код его произвёл. Вы даже можете настроить свой сервер таким образом, чтобы обычные HTML-файлы обрабатывались процессором PHP, так что клиенты даже не смогут узнать, получают ли они обычный HTML-файл или результат выполнения скрипта.

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

Хотя PHP, главным образом, предназначен для работы в среде веб-серверов, область его применения не ограничивается только этим. Читайте дальше и не пропустите главу Возможности PHP либо, начните непосредственно с Вводного руководства, если вас интересует исключительно веб-программирование.

User Contributed Notes

There are no user contributed notes for this page.

• Copyright © 2001-2023 The PHP Group
• My PHP.net
• Contact
• Other PHP.net sites
• Privacy policy

Препроцессоры

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

Самые популярные препроцессоры это SASS, LESS и Stylus. Все они похожи и решают одну задачу, поэтому достаточно выбрать и использовать один. Самый популярный препроцессор — SASS и его синтаксис SCSS.

• Совместимость — синтаксис препроцессора полностью совместим с уже существующими CSS-правилами. Готовый CSS-код можно вставить в SASS-файл, но не наоборот.
• Богатый функционал — большое количество вспомогательных конструкций для упрощения основных задач при написаниеи CSS-кода.
• Структура проекта — препроцессор позволяет писать стили в отдельных файлах, что повышает качество структуры проекта и поиск стилей отдельных блоков.
• Чистота кода — из-за того что стили пишутся в отдельных файлах и применяются вспомогательные конструкции для повторного использования кода, он становится чище.

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

Синтаксис​

Вначале препроцессор SASS имел одноимённый синтаксис — SASS . Для описания вложенности он использует отступы (пробелы или табы), вместо фигурных скобок, что понижает читабельность и повышает вероятность сделать ошибку. Файлы с этим синтаксисом имеют расширение .sass , например main.sass .

/* ❌ Старый синтаксис SASS */ .box width: 400px; height: 400px; background-color: teal;  &:hover background-color: orange; 

Сегодня используется синтаксис SCSS (Sassy CSS), который является расширением оригинального CSS-синтаксиса . Это значит, что любое допустимое значение в CSS-стилях будет работать и в SCSS. Файлы с этим синтаксисом имеют расширение .scss , например main.scss .

/* ✅ Новый синтаксис SCSS */ .box   width: 400px; height: 400px; background-color: teal;  &:hover   background-color: orange; > > 

Компиляция​

Браузер не понимает синтаксиса специальных конструкций SASS, поэтому код препроцессора необходимо преобразовать (скомпилировать) в CSS. Способов компиляции довольно много, различные консольные утилиты, сборщики и плагины редактора.

Процесс разработки сводится к следующим шагам.

• Настраиваем инструмент для компиляции SASS-кода.
• Пишем код в файлах с расширением .scss .
• SASS автоматически компилируется в CSS и создаётся CSS-файл.
• Подключаем скомпилированный CSS-файл в index.html .

• Для тренировки синтаксиса можно использовать интерактивную площадку SassMeister.
• В редакторе VSCode есть расширение Live Sass Compiler, для компиляции SASS.
• Можно воспользоваться удобным приложением Scout-App.

Дополнительные материалы​

• Документация SASS
• Эстетичный Sass

Что такое html препроцессоры простыми словами

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

Что такое фронтенд?

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

В свою очередь, web-приложение — клиент-серверное приложение, в котором клиентом выступает в основном браузер, а сервером — web-сервер. Логика web-приложения распределена между сервером и клиентом, хранение данных осуществляется преимущественно на сервере, обмен информацией происходит по сети. Проще говоря, это то, что видит пользователь и какие действия выполняет каждый раз, когда подключается к сети интернет и открывает любой браузер.

Frontend-разработка — это работа по созданию публичной части web-приложения, с которой непосредственно контактирует пользователь, и функционала, который обычно выполняется на стороне клиента. То есть, фронтенд разработчик работает над тем, чтобы на сайте каждая кнопочка, иконка, текст и окно не только стояли на своем месте, не перекрывали друг друга и выглядели целостно (это веб-верстка), но и чтобы они выполняли свое прямое предназначение — производили какие-то действие (например, чтобы кнопка “купить” открывала корзину, а “play” — запускала воспроизведение фильма или музыки).

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

Компоненты фронтенд разработки:

• HTML (HyperText Markup Language) говоря простыми словами — это язык разметки всех элементов и документов на странице, и их взаимодействие в структуре страницы.
• CSS (Cascading Style Sheets) — это язык характеристики и стилизации внешнего вида документа. С помощью CSS-кода браузер понимает, как именно необходимо отображать элементы. CSS создает шрифты, цвета, определяет расположение блоков сайта, и другое. Также адаптирует один и тот же документ в разных стилях, выводит передачу на экран или для чтения голосом.
• JavaScript — язык, созданный оживить веб-страницы. Задача JavaScript — откликаться на действия пользователя, обрабатывать нажатия клавиш, перемещения курсора, клики мышкой. JavaScript также дает возможность вводить сообщения, посылать запросы на сервер, а также загружает данные без перезагрузки страницы, и так далее.

Главная задача Frontend-разработчика

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

Вся фронтенд разработка выполняется на стороне пользователя, она не менее важна чем бекенд разработка (о ней мы также упомянем чуть ниже), так как это то, что пользователь видит и с чем взаимодействует. Основная задача фронтенд специалиста — это связать представленные дизайнером графические макеты Web-приложения (страницы сайта) с бэкендом и при необходимости реализовать вычислительный функционал на стороне пользователя. Основные технологии в арсенале фронтендера это HTML, CSS и JavaScript. Конечно, при работе в команде нужно знать и разбираться во многих процессах, смежных с работой фронтенд-разработки. Будучи уже опытным фронтенд-разработчиком нужно быть знакомым с бэкенд-технологиями и понимать принципы взаимодействия пользователя и с приложениями (UX).

Что должен знать опытный фронтенд-разработчик?

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

Некоторые работодатели совершенно не различают фронтенд-разработчика от верстальщика, предъявляя к соискателю вакансии на должность фронтенд-разработчика знание навыков совершенно не относящихся к его профилю. Работодатели часто сами не знают, что верстальщик — это фактически узкопрофильный специалист. Его задача заключается в верстке макета, полученного от дизайнера, используя при этом только HTML+CSS, и это всего треть от того, что должен знать junior frontend разработчик.

Что же касается опытного фронтенд девелопера, он не просто “верстает макеты”, он отлично знает JavaScript, ориентируется в фреймворках и библиотеках, имеет представление и понимание того, что размещается на серверной стороне, и нередко знает дополнительные языки, например PHP или C#.

Фронтенд-разработчик смыслит в препроцессорах и сборщиках GULP, LESS, SASS, GRUNT, работает с SVG-объектами, DOM, API, AJAX и CORS и так далее. Кроме всего прочего присутствует понимание принципов адаптивной и отзывчивой верстки, UI/UX-проектирования, кросс-браузерности и кросс-платформенности, базового тестирования, возможно, также, и знание навыков мобильной разработки. Продвинутый фронтенд девелопер также умеет использовать графические редакторы, работает с контролем версий Git, GitHub, CVS, с шаблонами различных CMS. Стоит отметить, что очень важно, также, и знание английского языка на уровне свободного общения с заказчиками и чтения документации.

Чтобы стать востребованным и опытным специалистом в области Фронтенд разработки, необходимо освоить следующие технологии:

• HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills);
• свободно работать с JavaScript;
• Понимать логику работы клиент-серверной архитектуры в контексте написания реальных приложений;
• Знать популярные библиотеки и феймворки: React.js, jQuery, Angular.JS, Redux, js, понимать принципы построения современных одностраничных приложений (Single Page Application);
• Препроцессоры CSS (Sass, Less, Stylus и т. д.);
• Популярные CMS (WordPress, Drupal, Joomla и т.д.);
• OOCSS / BEM / SMACSS;
• ECMAScript 6;
• HTML5 API;
• SVG;
• DOM;
• Понимать принципы построения backend (Node.js, PHP, Ruby, .NET и т. д.);
• JavaScript транспайлеры (Babel);
• Инструменты дебаггинга (Chrome Dev Tools, Firebug и так далее);
• Графические редакторы (Photoshop, Illustrator и прочее);
• Инструменты контроля версий (Git, GitHub, CVS и так далее);
• Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и так далее).

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

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

На кусах фронтенд разработки в Dan.It вы сможете приобрести знания и освоить все навыки, необходимые востребованному frontend-разработчику.

Frontend и Backend разработка — отличия и взаимодействие между собой

Backend — это программно-аппаратная часть проекта, Frontend же является клиентской стороной пользовательского интерфейса к программно-аппаратной части проекта, то есть к бекенду. Другими словами бекенд — это все то, что происходит на стороне сервера и что остается невидимым пользователю (сам сервер тоже является частью бэкенда, только аппаратной). Отсюда и название front — это видимое спереди, back — это то, что скрыто сзади, невидимое.

К примеру, вы оплачиваете покупку в интернете: вводите данные карты, кликаете “оплатить” и видите надпись “ваш платеж принят в обработку” — это был фронтенд. То, как двигаются ваши деньги внутри сети и то, как ваш заказ поступает в магазин — это бекенд. Соответственно, когда магазин видит уведомление о том, что поступил заказ, а деньги зачислились на счет — это снова работа фронтенда.

Бекенд-разработчики имеют дело с серверными языками программирования, такими как Java, Python, PHP, Ruby и другие. Также бэкендеры должны знать базы данных, архитектуру, ко всему прочему им пригодятся знания аппаратной части бэкенда, то есть сервера, его возможности и характеристики. Бекенд-разработчики, как правило, не имеют дела ни с чем, что напрямую взаимодействует с пользователем они не разбираются в пользовательских интерфейсах UI и не углубляются в пользовательский опыт взаимодействия UX или в верстку страницы, хотя общее понимание всего этого имеют. Они работают, в основном, с точным анализом и вычислениями, где почти нет творческой, гуманитарной составляющей. При этом, им нужно уметь вычислять все возможные исходы операций и понимать причины ошибок, появившихся на пути клиент-сервер-клиент.

Рассмотрим процесс взаимодействия frontend и backend:

• фронтенд отправляет пользовательскую информацию в бэкенд;
• информация обрабатывается;
• информация возвращается обратно, приняв целостную форму и выполнив обработанный запрос.

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

Варианты взаимодействия frontend и backend:

• HTTP-запрос отправляется на сервер, сервер в процессе поиска информации, встраивает ее в шаблон и возвращает обратно в виде HTML-страницы.
• Случай с применением инструментария AJAX (Asynchronous JavaScript and XML). В данном случае запрос отправляет JavaScript, который загружен в браузер, ответ же приходит в формате XML или JSON.
• Одностраничные приложения, которые загружают данные без обновления страниц. Это делается с помощью AJAX или фреймворков Angular и Ember.
• Ember или библиотека React оказывают помощь в использовании приложения и в клиентской части и на сервере. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

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

Карьера и зарплата фронтенд-разработчика

Чаще всего карьера frontend-разработчика начинается с верстальщика и тестировщика. В процессе работы изучается HTML+CSS, далее по нарастающей приобретаются знания JavaScript, библиотек и фреймворков. Затем изучаются основные понятия построения серверной части, параллельно добавляя инструменты, согласно выбранной специализации. Дополнительно нарабатываются навыки работы с графическими редакторами и пониманием принципов UI/UX дизайна и, конечно же, софт-скилы.

В целом, возможны такие основные пути развития фронтенд девелопера:

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

Что касается повышения уровня квалификации с позиции junior до senior — в первых двух случаях шансы стать синьором и/или тим лидом практически одинаковы, все зависит от вашего стремления расти и учиться. В третьем случае вам может понадобится немного больше времени, ведь сменив направление, вы можете спрыгнуть с позиции senior frontend на junior backend.

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

Как стать фронтенд-разработчиком — курсы, которые научат

Если вы новичок в ІТ-индустрии и хотите изучить фронтенд с нуля, то курсы по направлению frontend будут правильным решением. Если у вас есть желание работать с клиентской и визуальной частью сайтов и посадочных страниц, имеете представление, что такое компьютерная верстка и хотите развиваться в этом направлении, специализированные курсы помогут получить полные и структурированные знания. Для новичков курсы послужат твердой базой на пути к продвинутому уровню, а менторы в DAN.IT education помогут освоить её учитывая ваши имеющиеся знания и пожелания.

На курсах DAN.IT в Киеве вас обучат веб-вёрстке, распространенному в среде программистов язык JavaScript, фреймворки типа React. js, работа с Git, плюс даются основы BackEnd. Курс Front End оснащен примерами и кейсами, получил одобрение израильских и украинских разработчиков, студенты проходят обучение по последним стандартам ІТ-рынка.

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

Чему мы обучаем на курсах

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

• Основы HTML, CSS. Селекторы CSS; оформление элементов; управление размером и положением блоков на странице; поля и отступы; порядок верстки блока; тестирование результатов верстки; адаптивная веб верстка; нюансы кроссбраузерной вёрстки; базовая анимация; стандарт CSS3; основные инструменты разработчика.
• Основы JavaScript. Базовые и объектные типы данных; преобразование типов; переменные и правила их именования; условия, операторы, массивы, циклы, функции; области видимости, замыкания; контекст вызова; управляющие конструкции; обработка ошибок; введение в браузерные события; Localstorage/Sessionstorage.
• Advanced HTML/CSS. CSS методологии на примере BEM; верстка с пиксельной точностью; верстка с поддержкой Retina экранов; кросс-браузерная верстка; Web accessibility; Mobile first
• Advanced JavaScript. Глубокое погружение в возможности языка; изучение основ объектно-ориентированного программирования (ООП), базовых шаблонов проектирования, основ функционального программирования, возможностей стандарта ES6\ ES7 (ECMAScript); конструкторы; прототипное наследование (prototype); рекурсия; модули; strict mode; cookies; Async/Await. Знакомство со стандартами WebSocket, JSONP, AJAX, XMLHttpRequest, Promise, Single Page Application, общая информация про RESTful API, тестирование кода с помощью фреймворков.
• Основы работы с библиотекой React.js. Верстка JSX; виртуальный DOM; components; работа с Props/State компонента; React Router; Redux; работа с ImmutableJS в React/Redux приложении; работа с middleware, Redux-thunk; Redux-forms; Тестирование приложения с помощью Jest и Enzyme; Использование хуков в React.
• Воркшоп: Серверный JavaScript (Backend). Знакомство с технологией Node.js; инфраструктура и использование пакетного менеджера NPM (package manager); фреймворк Express.js; работа с базами данных на примере MongoDB.
• Дополнительные навыки. Работа с Git Bash; workflow от создания репозитория до его отправки на удаленный сервер; работа с ветками; работа с конфигурационными файлами.

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

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

Также студентам предоставляется возможность работы в команде над финальным проектом по методике scrum. Стартом такого проекта послужит реализация идеи клиента. После окончания финального проекта студентов ожидает его презентация перед членами Наблюдательного совета.

Заключение

В этом материале мы рассказали, что такое “фронтенд”, чем он отличается “бэкенда”, какими навыками необходимо обладать, чтобы стать востребованным фронтенд-разработчиком и какая заработная плата может быть у новичка.

В чем смысл html-препроцессоров?

Ну, вот я понимаю для чего нужен emmet в sublime, он быстро тебе через таб дополняет html
А вот все эти HAML, BEML, Jade, что там еще есть, и их же не будет человек постоянно скопировал и вставил в онлайн конвертер (это как я раньше постоянно тупил и копировал в less конвертер, сейчас же есть всякие консольные программки с watch событиями). Просто, кто использует в практике html препроцессоры у себя, поделитесь опытом?

• Вопрос задан более трёх лет назад
• 5313 просмотров

5 комментариев

Оценить 5 комментариев

Сергей delphinpro @delphinpro Куратор тега HTML

Все их используют. Все, кто серьезно занимается разработкой.
Примеры, ну я не знаю. примитивное — общие шапка и подвал на всех страницах, которые заказчик «вдруг» решил поменять. А страниц — пара десятков.
Или страница каталога товаров с 60-ю одинаковыми элементами, которые тоже вдруг нужно чуток изменить.
Без шаблонизатора вы обречены на нудную копипасту, и не факт, что вы будете очень внимательным копипастером.

Максим Иванов @splincodewd Автор вопроса

так это же не относится к html препроцессору, если у нас 60 одинаковых элементов их можно циклом сгенерировать на js или на php если уж нужно и используем в качестве серверного языка

Максим Иванов: Речь идёт о фронтенде. Генерировать js’ом элементы, которые в билде должны быть статичны — абсурд. О php на этом этапе речи вообще не идёт, бэкенд — следующий этап.

Serj-One: тут у большинства скорее вопрос, как и у меня кстати, что делать дальше, когда бэкенд уже есть? допустим, сверстал я с этим джейдом всё, прикрутили на бэкенде шаблонизатор php-шный.. и тут надо что-то поменять. Тогда всё, забить на джейд и править уже шаблон? или есть какой-то адеквтаный вариант мерджить результат работы джейда с готовым шаблоном?

timfcsm: так ты в исходниках делаешь правки в jade и отдаешь прогеру. А уже прогер вносит соответствующие коррективы нв сайте.

Решения вопроса 5

i’m sexy and i know it

• Переменные
• Миксины
• Шаблонизация

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать

В чем смысл html-препроцессоров?

+ 10 к скорости, удобству, абстракции

Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется — вы сами это поймете и начнете поиск подходящего инструмента. Данный принцип вполне универсален и подходит не только в случае html-препроцессора, а вообще.

Ответ написан более трёх лет назад
Нравится 2 7 комментариев
Сергей @sabramovskikh
+10? +100500 наверно если это в промышленных масштабах)

Сергей: люто плюсую =)

Сергей delphinpro @delphinpro Куратор тега HTML
тут даже добавить нечего. +1

Максим Иванов @splincodewd Автор вопроса
так получается все через ноду компилите или таск менеджеры? или копировать вставить в конвереры?))

Максим Иванов: Естественно таск менеджеры, вручную компилировать это абсурд.

Максим Иванов @splincodewd Автор вопроса
еще научится этим таск менеджерам

Алексей Струков @pm_wanderer
А как эти вещи можно применить если например на сервере php из шаблонов собирает страницу?

Помог ответ? Отметь решением.
На чистом html много страниц выглядят так:
main_page.html

about.html

contacts.html

С помощью jade делаем так:

each TITLE in["Main page", "About us", "Contacts"] html head title= TITLE body

Результат тот же. Ну и конечно ответ Serj-One вполне исчерпывающий.
Ответ написан более трёх лет назад
Нравится 2 15 комментариев

Максим Иванов @splincodewd Автор вопроса

each TITLE in[«Main page», «About us», «Contacts»] а расскажите, как это он распарсит на несколько страниц html? или это все он в одном файле выведет?

Максим Иванов: блин, ну это синтетический пример )))
Я к тому, что можно использовать циклы, переменные при компиляции. Например список ul>li из 100 элементов будет выглядеть так:

ul -var liArr = [] -for(var i=0; i <101;i++)< - liArr.push(i) ->each li in liArr li= li

Максим Иванов @splincodewd Автор вопроса
но это же можно и на js делать, почему именно препроцессоры использовать то?

Максим Иванов: Что можно делать на js? Генерировать разметку, которая в билде должна быть статичной? Это абсурд.

Serj-One: а на emmet надо просто написать header+main+footer + ctrl+enter и всё , и ни каких препроцессоров для глупого html не надо

Serj-One: и так же html:5 + ctrl+enter и всё и не надо думать о jade и прочей лишней шелухе

Максим Жаров: Причём здесь вообще emmet? Как можно сравнивать совершенно разные инструменты? Препроцессоры — это в первую очередь шаблонизация. Чем поможет emmet, если нужно изменить уже свёрстанную шапку для 50 страниц? Ничем. Я изменю 1 шаблон, а ты будешь копипастить новую шапку на все 50 страниц. И это только самый очевидный пример.

Максим Жаров: процитирую Олег : Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен. Как только потребуется — вы сами это поймете и начнете поиск подходящего инструмента.

Serj-One: а зачем вы делаете 50 html файлов? Всмысле когда это нужно? Для каких проектов? Кто у вас это просит?

Barmunk: Большинство моих проектов — довольно объёмные интернет-магазины. Среднее количество 12-15, но и 20-25 типов страниц — норма. Плюс обычно добавляется 2-3 варианта ключевых элементов для A/B тестирования. В итоге получаем 40-70 вариантов страниц на проект, и это далеко не предел. Не так давно выполнял проект для крупного завода, — центральный сайт + сайты 8-ми его подразделений. Общий стиль, но каждый имеет уникальные отличия. В совокупности проекта вышло более 250 чем-то отличающихся страниц, где любое структурное изменение дизайна затрагивало каждую.
Думаю, очевидно, что в таком случае копипаста любого изменения в каждый файл — не вариант, и шаблонизация необходима.

Serj-One: Само собой копипаста зло, но не проще это сразу на php делать с примитивным include? Ведь если я правильно понимаю твои 250 страниц потом отдадут бэкендщику, который будет во все это втыкать.

Serj-One: не буду , я выложу на либо на локальный хост либо на удалённый , и с php подключу 1000000000. раз

Barmunk: Максим Жаров: Нет, не проще. Рассмотрение php инклудов в контексте обсуждения html-препроцессоров настолько абсурдно, что я даже не буду объяснять причин. Как здесь уже не раз сказали: «Если вам не понятен смысл, то скорее всего на данном этапе html-препроцессор вам не нужен.»

Serj-One: по мне так проще include чем установка и компиляция хоть и абсурдно

Serj-One: и к тому же , для php шапка должна быть одна , а не 1000 штук , вы это понимаете сами лучше меня , я потому не вижу смысла в jade , я им начал пользоваться и даже сам не знаю почему , для интереса , и что бы сгенернить что то надо ещё и написать это липу и потом отгенерировать и потом только будет результат , а по факты ключевых страниц то ну максимум 20 может быть — а не 1000