Сделайте многостраничную разработку HTML нетрудной с помощью Pug

sdelajte mnogostranichnuyu razrabotku html netrudnoj s pomoshhyu pug

Вдохновленный настоящей историей

Отправляемся в путешествие…

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

Нам немедленно нужен разработчик, чтобы начать сегодня работу.

сообщение, и оно выглядит вполне нормально.

Нам немедленно нужен разработчик, чтобы начать сегодня работу.

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

В течение пяти минут после нажатия кнопки отправки вы получите звонок. Через 10 минут после этого вы получите доступ к серверу.

Излишне говорить, что у вас дедлайн. Этот срок – до конца дня.

Вы открываете файлы HTML и смотрите на них с ужасом.

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

Первое, что вы делаете, это запускаете его через Prettify (Слава Богу за Prettify). Это очистило его, но есть еще некоторые проблемы. Это статический HTML-сайт, означающий, что каждое изменение, которое вы вносите в общий материал (заголовок, нижний колонтитул и т.п.), вам придется скопировать в КАЖДЫЙ файл. О Боже.

Что ты собираешься делать?

Просто, вы собираетесь создать файл Webpack, чтобы справиться с скверной частью написания HTML, и вы сделаете это быстро.

Вот что вам нужно будет знать:

  • Javascript! (через Webpack)
  • HTML! (потому что из этого состоит Интернет)
  • CSS! (потому что кто любит безобразные вещи?)
  • мопс! (потому что это суть этой статьи!)
  • npm (потому что это Бог)
  • Базовые знания командной строки (потому что делать что-то с помощью загрузки – это глупо…)
  • Знайте, кто такой Джим Керри (потому что gif)

Если вы не знакомы с мопсом, вы все равно можете справиться с этим. Но если у вас есть время, почитайте. Рекомендую учить мопсу с мопсами. Или их документы. Это тоже хорошо, я думаю.

Вот версии, которые я использовал для этого:

  • html-загрузчик: 0.5.5,
  • html-webpack-plugin: 3.2.0,
  • pug-html-loader: 1.1.5,
  • Веб-пакет: 4.12.0
  • webpack-cli: 3.0.8
  • npm: 6.1.0
  • узел: 10.4.0

Обновление: Я сделал видео! Посмотрите, если вы не хотите читать, а хотите послушать мой голос в течение 30 минут.

Вот как я люблю организовать свою папку для проектов такого типа.

src/
oldHTML/
dist/
images/
css/
webpack.config

Мне нравится поместить весь оригинальный HTML в отдельную папку, которую я не могу случайно удалить. Webpack немного добрее, чем, скажем, Gulp, который мне приходилось удалять целую папку раньше. Эта структура достаточно хороша, чтобы начать.

В сторону: я недавно вернулся в npm от yarn по нескольким причинам. Одно из которых заключалось в том, что он перестал работать, и у меня было мало терпения, чтобы заставить его работать снова. Интересная статья здесь, если хочешь почитать больше.

В любом случае, инициировать этот npm.

npm init -y

Примечание: ( если вы не хотите отвечать ни на один из его вопросов)

Установите зависимости разработки.

Не беспокойтесь, я объясню каждый из них.

npm install -D webpack webpack-cli pug-html-loader html-webpack-plugin html-loader

Добавьте несколько скриптов в package.json

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

"dev": "webpack --watch --mode development",
"prod": "webpack --mode production"

Это два, которые мне нравиться включать. Первый будет запускать Webpack в режиме разработки (примечание: флаг —mode новый для Webpack 4) и будет наблюдать за изменениями файлов. Во-вторых, когда мы хотим запустить Webpack в производстве, это обычно минимизирует вещи.

Это должно выглядеть примерно так:

"name": "pugTut",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test":
  "dev": "webpack --watch --mode development",
  "prod": "webpack --mode production"
},
.....more code

Создайте пару исходных файлов, чтобы проверить нашу конфигурацию Webpack

Webpack нуждается в точке входа, поэтому давайте ее создадим. Создайте app.js в src/ папку. Он может быть пуст. Не имеет значения. Для компиляции также требуется исходный файл pug. Создать index.pug файл в src/ папку, тоже.

Создайте и настройте webpack.config.js в корневом каталоге

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

Сначала давайте объявим наши зависимости.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

Webpack есть, ну Webpack…

HtmlWebpackPlugin как мы вытаскиваем HTML. Я не эксперт о том, как работает Webpack. Насколько я понимаю, поскольку она разработана для использования JavaScript, мы должны иметь загрузчики в нашем файле конфигурации, чтобы извлекать такие вещи, как HTML и CSS. HtmlWebpackPlugin это то, как мы делаем что-нибудь полезное из HTML, который извлекается из загрузчиков.

Круто? Следующий шаг…

const pug = {
  test: /\.pug$/,
  use: ['html-loader?attrs=false', 'pug-html-loader']
};

Этим методом пользуется Вес Босс, и он мне очень нравится, поэтому я им пользуюсь. Нам нужно определить правила обработки некоторых типов файлов, например .pug или .css. Помещение его в переменную делает его более разборчивым, на мой взгляд. В любом случае, мы устанавливаем тестовый пример с регулярным выражением, а затем определяем загрузчики, которые мы хотим использовать. По какой-либо причине погрузчики перечислены в порядке, обратном тому, что вы думаете. Я уверен, что есть объяснение, но я не смог найти его.

Растерянный? Это означает, что если мы хотим использовать pug для компиляции в HTML, мы пишем это в вышеприведенном порядке: загрузчик html -> мопс-погрузчик. Однако на самом деле, когда код выполняется, он запускает мопс-погрузчик сначала… потом Загрузчик HTML. да.

Примечание: не волнуйтесь ?attrs=false сейчас я объясню это немного позже.

Круто? Следующий шаг…

const config = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [pug]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.pug',
      inject: false
    })
 ]
};
module.exports = config;

Святое гимно. Это очень многое. Давайте разберем его.

Вход Это просто точка входа для нашего файла JS.

выход определяет, куда мы хотим разместить наш JS файл. Наши HTML файлы пойдут не сюда. Как указано выше, путь является узловым модулем. __имя имени это переменная, которую мы можем получить от Node. Имя файла – это то, что мы хотим назвать нашим файлом JS. The [name] является заменой. В этом случае он использует имя записывающего файла. Вы также можете использовать [hash] если вам нужен уникальный идентификатор.

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

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

имя файла мы хотим, чтобы наш HTML-файл назывался. шаблон это файл pug, который компилируется. вводить следующее: «вставить все активы в данный шаблон». У меня установлено значение false, потому что… ну, честно говоря, я не помню.

Одна из худших вещей HtmlWebpackPlugin заключается в том, что вам нужно создать запись для КАЖДЫЙ HTML файл. Я пытался найти способ обойти это, но не нашел простых решений.

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const pug = {
  test: /\.pug$/,
  use: ['html-loader?attrs=false', 'pug-html-loader']
};
const config = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [pug]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.pug',
      inject: false
    })
 ]
};
module.exports = config;

Прежде чем двигаться дальше, давайте убедимся, что наш код работает! Запустите скрипт.

npm run dev

Если все прошло хорошо, вы должны увидеть нечто подобное:

1_JQLr9uvGeW2P9VQRaWmsMA

Мы прошли долгий путь. Вот подарок:

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

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

Давайте создадим пару файлов. Вы должны были создать index.pug файл уже, но давайте создадим еще один, макет.мопс.

src/
- index.pug
- layout.pug

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

//- layout.pug
doctype html
html
  head
    title I'm a title
  body
    block header
    block content
    block footer
  script(src="https://www.freecodecamp.org/news/make-multipage-html-development-suck-less-with-pug-fb23bc8e7874/somescript.js")

Я думаю, что нужно объяснить, что мопс весь основан на отступах, подобно YAML. Это отлично, потому что это означает, что больше нет закрывающих тегов! Однако это может вызвать некоторые проблемы, особенно те, у которых изначально есть плохие отступления. Поэтому убедитесь, что начинайте медленно и убедитесь, что все правильно с отступлением и все будет хорошо.

Посмотрев на наш файл layout.pug, вы увидите некоторые знакомые HTML-теги, смешанные с незнакомыми. Я настоятельно предлагаю загрузить подсветку синтаксиса для мопса в своем редакторе. Если вы используете VSCode, он должен поставляться с ним по умолчанию. Спасибо Microsoft.

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

head
  title I'm a title
body
  block header
  block content
  block footer
script(src="https://www.freecodecamp.org/news/make-multipage-html-development-suck-less-with-pug-fb23bc8e7874/somescript.js")

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

Давайте воспользуемся этим файлом index.pug.

//- index.pug
extends layout
block content
  p Woah.

Глядя на наш индексный файл, он кажется очень малым для всей страницы HTML. Это потому мало расширяется парень. extends сообщает pug, что вы хотите использовать другой файл pug в качестве шаблона, в нашем случае макет. Затем ниже блочное содержимоеt относится к тому, что мы вкладываем в наш макет.мопс файл.

Если ваш Webpack все еще работает в фоновом режиме, его следует перекомпилировать, и вы получите новый index.html в вашем dist/ папку. Если нет, запустите Webpack снова.

Эти исходные файлы замечательные и современные, но нам нужно добиться реального прогресса. Нам нужно начать увлекать этот HTML и использовать его! К счастью, pug распознает обычные старые HTML-теги, поэтому вы можете буквально скопировать все HTML-содержимое, которое хотите, и просто вставить его туда.

Это может выглядеть примерно так:

extends layout
block content
  <h1>blerb</h1>
  <p>Woah.</p>

Ладно, это действительно не так просто.

Как я уже упоминал, мопс основан на отступлении. Чтобы облегчить себе жизнь, я предлагаю удалить все отступы из HTML-файла перед вставкой в ​​файл pug. В большинстве своем это сработает, но вам, вероятно, придется немного починить. Нам повезло, pug-html-loader скажет нам, что с ним не так, когда он попытается скомпилироваться. На следующем шаге приведены несколько примеров распространенных проблем.

Я не буду лгать, когда вы впервые введете HTML, Webpack это не понравится. Вот несколько вещей, на которые следует обратить внимание:

Изображение

  1. Убедитесь, что ссылки на изображения хороши. По какой-либо причине это часто не удается, если src = «images/» вместо src = «/images/»

2. Я раньше обещал вернуться к чему ?attrs=false было, ну вот мы здесь!

Это аннотация с сайта html-loader, объясняющая, что это делает.

Чтобы полностью отключить обработку атрибутов тегов (например, если вы обрабатываете загрузку изображения на стороне клиента), можно передать attrs=false.

html-loader?attrs=false

Javascript

pug плохо играет с JS в тэгах скриптов. Если вы вставляете обычные открывающие и закрывающие теги сценария JS, это может работать нормально. Однако, если вы хотите использовать тег сценария pug, просто добавьте точку в конце, например:

Очевидно, что это бесполезно, если вы делаете только страницу индекса. Что бы вы ни делали, просто создайте новый файл для каждой нужной страницы. Также обязательно сделайте новый HtmlWebpackPlugin записи в плагины раздел в Webpack.

В итоге это будет выглядеть так:

//webpack.config.js
...previous code...
plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.pug',
      inject: false
    }),
    new HtmlWebpackPlugin({
      filename: 'contact.html',
      template: 'src/contact.pug',
      inject: false
    })
  ]
...more code...

Вам не нужно сразу конвертировать все в формат pug. В самом деле, если у вас есть огромный сайт с кучей HTML, вы можете делать это на ходу, но это облегчает работу.

Включает

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

Создайте новый файл «заголовок» в новой папке «включает»:

src/
-- includes/
   header.pug

В этом файле добавьте все, что вы хотите быть в заголовке.

//- header.pug
header
  h1 I'm a header

Теперь вернитесь в layout.pug и включите его.

//- layout.pug
doctype html
html
  head
    title I'm a title
  body
    block header
      include includes/header
    block content
    block footer
  script(src="https://www.freecodecamp.org/news/make-multipage-html-development-suck-less-with-pug-fb23bc8e7874/somescript.js")

С помощью pug и webpack можно сделать еще многое. Однако я думаю, что мы подошли к концу. Тем не менее, проверьте миксины. Эти вещи удивительны.

Я настоятельно советую вводить HTML медленно, иначе вы наладите 1000 ошибок одновременно.

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

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