Учините да развој ХТМЛ-а на више страница буде мање срање с Пугом

Инспирисан истинитом причом

Кренимо на путовање ...

Замислите да сте на листи позива за слободну агенцију у граду по вашем избору. Сад рецимо да у пријемно сандуче добијете лепу поруку. Отворите поруку и изгледа прилично нормално.

Имамо непосредну потребу да програмер започне данас.

порука и изгледа прилично нормално.

Имамо непосредну потребу да програмер започне данас.

Као особа која ужива да једе храну да би преживела, укуцате неке информације и пријавите се.

У року од пет минута након што притиснете то дугме за слање, примите позив. 10 минута након тога добићете приступ серверу.

Непотребно је рећи да имате рок. Тај рок је до краја дана.

Отворите ХТМЛ датотеке и погледате их ... ужаснуто.

Шифра је свуда, неуредна и неорганизована. Да не спомињем, морате извршити прилагођавање заглавља и подножја ... на пет различитих страница.

Прво што урадите је да га покренете кроз Преттифи (хвала богу за Преттифи). То је очистило, али има још неких проблема. Ово је статична ХТМЛ локација, што значи да ћете сваку промену у глобалним стварима (заглавље, подножје итд.) Морати да копирате у СВАКУ датотеку. О Боже.

Шта ћеш да радиш???

Једноставно, направит ћете Вебпацк датотеку да бисте се носили са усраним делом писања ХТМЛ-а и то ћете учинити брзо.

Ево шта треба да будете упознати:

  • Јавасцрипт! (због Вебпацк-а)
  • ХТМЛ! (јер је од тога направљен интернет)
  • ЦСС! (јер ко воли ружне ствари?)
  • мопс! (јер је то поента овог чланка!)
  • нпм (јер је Бог)
  • Основно знање из командне линије (јер радити ствари путем преузимања је глупо ...)
  • Знајте ко је Јим Царреи (јер ГИФ-ови)

Ако нисте упознати са мопсом, још увек можете да се снађете кроз ово. Али ако имате времена, прочитајте га. Препоручујем учење мопса са мопсовима. Или њихови документи. Претпостављам да су и то у реду.

Ево верзија које сам користио за ово:

  • хтмл-лоадер: 0.5.5,
  • хтмл-вебпацк-плугин: 3.2.0,
  • пуг-хтмл-лоадер: 1.1.5,
  • Вебпацк: 4.12.0
  • вебпацк-цли: 3.0.8
  • нпм: 6.1.0
  • чвор: 10.4.0

Ажурирање: Направио сам видео! Проверите ако не желите да читате, већ бисте радије слушали мој глас 30 минута.

Корак 1. Организујте структуру вашег пројекта

Овако волим да организујем свој директоријум за ове врсте пројеката.

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

Волим да сав оригинални ХТМЛ ставим у засебну фасциклу коју не могу случајно да избришем. Вебпацк је мало љубазнији од рецимо Гулп-а, који сам раније брисао читав фолдер? Ова структура је довољно добра да започнемо.

Корак 2. Окрећите нпм мотор

На страну: Недавно сам се вратио npmиз yarnиз неколико разлога. Један од њих је био тај што је престао да ради и имао сам мало стрпљења да то поново учиним. Занимљив чланак овде, ако желите да прочитате више.

У сваком случају, покрени тај нпм.

npm init -y

Напомена: ( је ако не желите да одговорите ни на једно од његових питања)

Инсталирајте развојне зависности.

Не брините, објаснићу вам сваку од њих.

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

Додајте неке скрипте у пацкаге.јсон

Подразумевано, пацкаге.јсон има једну скрипту, али морамо додати неколико.

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

То су две које волим да уврстим. Први ће покренути Вебпацк у развојном режиму (напомена: заставица --моде је нова за Вебпацк 4) и надгледати промене датотека. Друго је када желимо да покренемо Вебпацк у производњи, то обично умањује ствари.

То би требало изгледати отприлике овако:

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

Направите неколико почетних датотека да бисте тестирали нашу конфигурацију Вебпацк-а

Вебпацк-у је потребна улазна тачка, па хајде да је направимо. Направите апп.јс у директоријуму срц / . Може бити празно. Није битно. Такође му је потребна почетна датотека мопса за компајлирање. Креирајте и датотеку индек.пуг у директоријуму срц / .

Направите и подесите вебпацк.цонфиг.јс у основном директоријуму

У реду, ако раније нисте користили Вебпацк, проћи ћу кроз сваки део појединачно како бих вам (и надам се и мени) дао представу о втф-у који се догађа у овој конфигурационој датотеци.

Прво, прогласимо своје зависности.

// 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'] };

Ову методу користи Вес Бос и стварно ми се свиђа, па је користим. Морамо да дефинишемо правила како се рукује одређеним врстама датотека, на пример .пуг или .цсс. Стављање у променљиву чини је читљивијом, по мом мишљењу. У сваком случају, постављамо тест случаја са регуларним изразом, а затим дефинишемо утовариваче које желимо да користимо. Из било ког разлога, утоваривачи су наведени у обрнутом редоследу од онога што бисте мислили. Сигуран сам да постоји објашњење, али нисам могао да га нађем.

Збуњен? То значи да, ако желимо да користимо пуг за компајлирање у ХТМЛ, записујемо га горњим редоследом: наш хтмл лоадер -> пуг лоадер . Међутим, у стварности када се код покрене, прво се покреће пуг лоадер ... затим ХТМЛ лоадер . Да.

Напомена: Не брините ?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;

Срање. То је пуно ствари. Раздвојимо то.

ентри је једноставно улазна тачка за нашу ЈС датотеку.

излаз дефинише где желимо да иде наша ЈС датотека. Овде неће ићи наше ХТМЛ датотеке. Као што је горе поменуто, патх је чворни модул. __дирнаме је променљива коју можемо добити од Ноде. Име датотеке је оно што желимо назвати нашом ЈС датотеком. Тхе[name]је замена. У овом случају користи име датотеке улазне датотеке. Такође можете да користите[hash]ако желите јединствени идентификатор.

модул дефинише различите модуле. У сврху овог упутства, постоји само један модул са једним скупом правила. рулес дефинише правила која ћемо користити за тај модул. Тамобацимоваријаблу мопс коју смо раније направили. Тако лепо, тако чисто.

И на крају, додаци могу да додају било које ствари треће стране. У нашем случају користимо ХтмлВебпацкПлугин да бисмо нешто урадили са нашим мопс датотекама.

име датотеке је оно што желимо да се зове наша ХТМЛ датотека. темплате је датотека мопса која се компајлира. ињецт је: „убризгајте сву имовину у дати образац.“ Подесио сам на фалсе јер ... па, искрено, не сећам се.

One of the crappiest things about HtmlWebpackPlugin is that you have to create an entry for EVERY HTML file. I tried to figure a way around it, but found no simple solutions.

// 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;

Before we move on, let’s make sure our code works! Run the script.

npm run dev

If all went well, you should see something like this:

We’ve come a long way. Here’s a present:

Step 3. Break up the pages into partials

This is where magic starts happening. I know it seems like we’ve been working for a while with very little gain, but trust me…it was worth it.

One of the most important features for pug is the partials. The idea is to have one file that holds most of your global code (head, header, footer, nav, and so on) and have individual files for all your content.

Let’s make a couple files. You should have created the index.pug file already, but let’s make one more, layout.pug.

src/ - index.pug - layout.pug

Step 4. Setup layout file

The layout file is basically the main template for your whole site. It will have hold all the global stuff, for example head, header and footer.

//- layout.pug doctype html html head title I'm a title body block header block content block footer script(src="somescript.js")

I guess something to explain is that pug is all based on indentation, similar to YAML. It is glorious, because that means no more closing tags! However, this can throw some, especially those with crappy indentation to begin with. So just make sure to start slow and make sure everything is indented correctly and you’ll be fine.

Looking at our layout.pug file, you’ll see some familiar HTML tags mixed with unfamiliar ones. I highly suggest downloading syntax highlighting for pug in your editor of choice. If you’re using VSCode, it should come with it by default. Thanks Microsoft.

I think it’s pretty easy to figure out, but let’s take a look at the meat of the document to make sure we know what’s going on.

head title I'm a title body block header block content block footer script(src="somescript.js")

head, body, title and script are normal tags, but what the hell is block? block is how we define dynamic content. Basically, this is telling pug that some content is going to go in here. Hopefully it’ll make more sense when we create our individual page files.

Step 5. Create more partials

Let’s make use of that index.pug file.

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

Looking at our index file, it seems awfully small for a whole HTML page. That’s because of that little extends fella. extends tells pug that you want to use another pug file as the template, in our case layout. Then below that block content is in reference to what we put in our layout.pug file.

If you have your Webpack still running in the background, it should recompile and you’ll get a fresh new index.html in your dist/ folder. If not, run Webpack again.

Step 6. Grab all the old HTML

Those starter files are fine and dandy, but we need to make some real progress. We need to start grabbing that HTML and using it! Luckily, pug will recognize regular old HTML tags, so you can literally copy all the HTML content you want and just paste it in there.

It might look something like this:

extends layout block content 

blerb

Woah.

Alright, it’s not really that simple.

Like I mentioned, pug is based on indentation. To make life easier on yourself, I suggest removing all indentation from the HTML file before pasting into the pug file. It will mostly work, but you’ll probably have to finagle it a bit. Lucky for us, pug-html-loader will tell us what’s wrong with it when it tries to compile. There are some examples of common problems in the next Step.

Step 7. Start optimizing

Нећу лагати, када први пут убаците ХТМЛ, Вебпацку се то неће свидети. Ево неколико ствари на које морате пазити:

Слике

  1. Уверите се да су везе до слика добре. Из било ког разлога, често не успе ако је срц = "имагес /" уместо срц = "/ имагес /"

2. Обећао сам раније да ћу се вратити на оно што ?attrs=falseје било, ето нас!

Ово је објашњење са странице хтмл-лоадер које објашњава шта то чини.

Да бисте у потпуности онемогућили обраду атрибута ознака (на пример, ако радите са учитавањем слика на страни клијента), можете да приступите attrs=false.
html-loader?attrs=false 

Јавасцрипт

мопс се не игра лепо са ЈС-ом у скриптама. Ако лепите редовно отварање и затварање ознака ЈС скрипте, можда ће то функционисати у реду. Међутим, ако желите да користите ознаку скрипте мопс, само додајте крај на крају, овако:

Step 8. Make more pages and start converting to pug tags

Clearly it’s useless if you are only doing the index page. For whatever you’re doing, just create a new file for each page you want. Also, make sure to make new HtmlWebpackPlugin entries in the plugins section in Webpack.

It’ll end up looking like this:

//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...

You don’t have to convert everything to pug format immediately. In fact, if you have a huge site with a crap ton of HTML, then you can do it as you go, but it does make it easier.

Includes

Ово не би био баш добар водич ако не бисмо разговарали о укључује. Сећате се оних блокова у датотеци распореда? Па, ако не желите да датотека распореда буде џиновска, можете створити засебне датотеке које ће се увлачити у време компајлирања. На пример, ако желите да направите једну датотеку која садржи све информације о заглављу. Прекид на овај начин такође значајно помаже у удубљивању.

Направите нову датотеку „заглавље“ у новој фасцикли „укључује“:

src/ -- includes/ header.pug

У ту датотеку ставите у заглавље све што желите.

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

Сада се вратите на лаиоут.пуг и укључите га.

//- layout.pug doctype html html head title I'm a title body block header include includes/header block content block footer script(src="somescript.js")

Корак 7. Да ли желите Фанци?

Постоји још тона ствари које можете учинити са мопсом и веб-пакетом. Међутим, мислим да смо дошли до краја основа. Ипак, погледајте миксине. Те ствари су невероватне.

Окончање

Топло предлажем да полако уносите ХТМЛ, иначе ћете на крају отклонити грешке од 1.000 грешака одједном.