Inspirat de o poveste adevărată

Să facem o călătorie …

Imaginați-vă că sunteți pe lista de apeluri pentru o agenție independentă într-un oraș la alegere. Acum, să presupunem că primiți un mesaj frumos în căsuța de e-mail. Deschideți mesajul și pare destul de normal.

Avem nevoie imediată ca un dezvoltator să înceapă astăzi.

mesajul și pare destul de normal.

Avem nevoie imediată ca un dezvoltator să înceapă astăzi.

Fiind o persoană căreia îi place să mănânce alimente pentru a supraviețui, introduceți câteva informații și aplicați.

În termen de cinci minute de la apăsarea butonului de trimitere, primiți un apel. După 10 minute, veți obține accesul la server.

Inutil să spun că sunteți la termen. Acest termen este până la sfârșitul zilei.

Deschideți fișierele HTML și le priviți … îngrozite.

ad-banner

Codul este peste tot, dezordonat și dezorganizat. Ca să nu mai vorbim, trebuie să faceți ajustări la antet și subsol … pe cinci pagini diferite.

Primul lucru pe care îl faci este să îl parcurgi Dăruiește (Mulțumesc lui Dumnezeu pentru Prettify). Asta l-a curățat, dar mai sunt câteva probleme. Acesta este un site HTML static, ceea ce înseamnă că fiecare modificare pe care o faceți la lucrurile globale (antet, subsol și așa mai departe), va trebui să copiați în FIECARE fişier. Vai.

Ce o sa faci???

Simplu, vei biciui un fișier Webpack pentru a face față cu partea mizerabilă a scrierii HTML și o vei face repede.

Iată cu ce va trebui să vă familiarizați:

  • Javascript! (din cauza Webpack)
  • HTML! (pentru că din asta este făcut internetul)
  • CSS! (pentru că cui îi plac lucrurile urâte?)
  • mops! (pentru că acesta este scopul acestui articol!)
  • npm (pentru că este Dumnezeu)
  • Cunoașterea de bază a liniei de comandă (pentru că a face lucruri prin descărcări este o prostie …)
  • Știți cine este Jim Carrey (pentru că gifurile)

Dacă nu sunteți familiarizați cu pugul, vă puteți descurca în continuare. Dar dacă aveți timp, citiți-l. Vă recomand să învățați carlig cu carlige. Sau a lor documente. Cred că și acestea sunt în regulă.

Iată versiunile pe care le-am folosit pentru asta:

  • html-loader: 0.5.5,
  • html-webpack-plugin: 3.2.0,
  • pug-html-loader: 1.1.5,
  • Webpack: 4.12.0
  • webpack-cli: 3.0.8
  • npm: 6.1.0
  • nod: 10.4.0

Actualizați: Am făcut un videoclip! Verifică-l dacă nu vrei să citești, dar preferi să asculți vocea mea timp de 30 de minute.

Pasul 1. Organizați-vă structura proiectului

Așa îmi place să îmi organizez folderul pentru aceste tipuri de proiecte.

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

Îmi place să pun tot HTML-ul original într-un folder separat pe care nu-l pot șterge accidental. Webpack este un pic mai amabil decât să spunem, Gulp, pe care l-am șters înainte într-un dosar întreg? Această structură este suficient de bună pentru a ne ajuta să începem.

Pasul 2. Revelați motorul npm

În afară de asta: am revenit recent la npm din yarn din câteva motive. Una dintre ele a fost că a încetat să funcționeze și am avut puțină răbdare să o fac să funcționeze din nou. Articol interesant aici, dacă doriți să citiți mai multe.

Oricum, inițiați acel npm.

npm init -y

Notă: ( – da este dacă nu doriți să răspundeți la niciuna dintre întrebările sale)

Instalați dependențe de dezvoltare.

Nu vă faceți griji, voi explica fiecare pe măsură ce mergem.

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

Adăugați câteva scripturi la package.json

În mod implicit, package.json are un singur script, dar trebuie să adăugăm câteva.

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

Acestea sunt cele două pe care îmi place să le includ. Primul va rula Webpack în modul de dezvoltare (notă: steagul –mode este nou pentru Webpack 4) și va urmări modificările fișierului. Al doilea este atunci când vrem să rulăm Webpack în producție, de obicei acest lucru reduce lucrurile.

Ar trebui să arate cam așa:

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

Creați câteva fișiere de pornire pentru a testa configurația noastră Webpack

Webpack are nevoie de un punct de intrare, așa că hai să facem unul. Creaza un app.js în src / pliant. Poate fi necompletat. Nu contează. De asemenea, are nevoie de un fișier pug inițial pentru a compila. Creeaza o index.pug fișier în src / folder, de asemenea.

Creați și configurați webpack.config.js în directorul rădăcină

În regulă, dacă nu ați folosit Webpack înainte, voi parcurge fiecare parte în mod individual pentru a vă oferi (și, sperăm) o idee despre wtf care se întâmplă în acest fișier de configurare.

În primul rând, să ne declarăm dependențele.

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

cale este o dependență nativă a nodului, deci nu ar trebui să vă faceți griji cu privire la faptul că acest lucru este necesar în package.json.

Webpack este, bine, Webpack …

HtmlWebpackPlugin cum extragem HTML. Nu sunt expert în modul în care funcționează Webpack. Din câte am înțeles, deoarece este conceput pentru a consuma JavaScript, trebuie să avem încărcătoare în fișierul nostru de configurare pentru a scoate lucruri precum HTML și CSS. HtmlWebpackPlugin este modul în care facem ceva util cu codul HTML care este extras din încărcătoare.

Misto? Urmatorul pas…

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

Această metodă este utilizată de Wes Bos și îmi place foarte mult, așa că îl folosesc. Trebuie să definim reguli despre cum să gestionăm anumite tipuri de fișiere, de exemplu .pug sau .css. Punerea acestuia într-o variabilă o face mai lizibilă, după părerea mea. Oricum, configurăm un caz de testare cu regexp, apoi definim încărcătoarele pe care dorim să le folosim. Indiferent de motiv, încărcătoarele sunt listate în ordine inversă a ceea ce ați crede. Sunt sigur că există o explicație, dar nu am găsit-o.

Confuz? Ceea ce înseamnă asta este, dacă vrem să folosim pug pentru a compila în HTML, îl scriem în ordinea de mai sus: a noastră încărcător html -> încărcător pug. Cu toate acestea, în realitate, când rulează codul, acesta rulează încărcător pug mai întâi … apoi Încărcător HTML. Da.

Notă: Nu vă faceți griji ?attrs=false căci acum, o să explic puțin mai târziu.

Misto? Urmatorul pas…

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;

Sfântă porcărie. Sunt multe lucruri. Să o descompunem.

intrare este pur și simplu punctul de intrare pentru fișierul nostru JS.

ieșire definește unde vrem să ajungă fișierul nostru JS. Nu aici vor merge fișierele noastre HTML. Așa cum sa menționat mai sus, cale este un modul nod. __nume este o variabilă pe care o putem obține de la nod. Numele fișierului este ceea ce vrem să numim fișierul nostru JS. [name] este o înlocuire. În acest caz, folosește numele fișierului fișierului de intrare. Puteți utiliza, de asemenea [hash] dacă doriți un identificator unic.

modul definește diferitele module. În scopul acestui tutorial, există un singur modul cu un singur set de reguli. reguli definește regulile pe care le vom folosi pentru acel modul. Aruncăm mops variabilă pe care am făcut-o mai devreme acolo. Atât de frumos, atât de curat.

În cele din urmă, pluginurile sunt locul în care putem adăuga orice lucruri terțe. În cazul nostru, folosim HtmlWebpackPlugin să facem ceva cu fișierele noastre pug.

nume de fișier este ceea ce dorim să fie numit fișierul nostru HTML. șablon este fișierul pug care se compilează. injecta este: „injectați toate activele în șablonul dat”. Am pus-o pe falsă pentru că … ei bine, sincer nu-mi amintesc.

Unul dintre cele mai nasolite lucruri HtmlWebpackPlugin este că trebuie să creați o intrare pentru FIECARE Fișier HTML. Am încercat să-mi dau seama, dar nu am găsit soluții simple.

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

Înainte de a merge mai departe, să ne asigurăm că codul nostru funcționează! Rulați scriptul.

npm run dev

Dacă totul a mers bine, ar trebui să vedeți așa ceva:

Faceti ca dezvoltarea HTML in mai multe pagini sa suge

Am parcurs un drum lung. Iată un cadou:

Pasul 3. Împărțiți paginile în parțiale

Aici începe să se întâmple magia. Știu că se pare că am lucrat de ceva vreme cu foarte puține câștiguri, dar credeți-mă … a meritat.

Una dintre cele mai importante caracteristici pentru pug este parțialele. Ideea este să aveți un fișier care să conțină cea mai mare parte a codului dvs. global (head, header, footer, nav și așa mai departe) și să aveți fișiere individuale pentru tot conținutul.

Să facem câteva fișiere. Ar fi trebuit să creați index.pug fișier deja, dar hai să mai facem unul, layout.pug.

src/
- index.pug
- layout.pug

Pasul 4. Configurați fișierul de aspect

Fișierul de aspect este practic șablonul principal pentru întregul site. Va conține toate lucrurile globale, de exemplu head, header și footer.

//- 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")

Cred că ceva de explicat este că pugul se bazează pe indentare, similar cu YAML. Este glorios, pentru că asta înseamnă că nu mai există etichete de închidere! Cu toate acestea, acest lucru poate arunca unii, în special cei cu indentare mizerabilă pentru început. Deci, asigurați-vă că începeți încet și asigurați-vă că totul este indentat corect și că veți fi bine.

Privind fișierul nostru layout.pug, veți vedea câteva etichete HTML familiare amestecate cu altele necunoscute. Vă sugerez să descărcați evidențierea sintaxei pentru pug în editorul ales. Dacă utilizați VSCode, acesta ar trebui să vină în mod implicit. Mulțumesc Microsoft.

Cred că este destul de ușor să ne dăm seama, dar să aruncăm o privire asupra cărnii documentului pentru a ne asigura că știm ce se întâmplă.

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")

cap, corp, titlu și scenariu sunt etichete normale, dar ce naiba este bloc? bloc este modul în care definim conținutul dinamic. Practic, acest lucru îi spune lui Pug că un anumit conținut va intra aici. Sperăm că va avea mai mult sens atunci când creăm fișierele noastre de pagină individuale.

Pasul 5. Creați mai multe parțiale

Să folosim fișierul index.pug.

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

Privind fișierul nostru index, pare îngrozitor de mic pentru o pagină HTML întreagă. Asta din cauza micului se extinde fella. extends îi spune pugului că doriți să utilizați un alt fișier pug ca șablon, în cazul nostru aspect. Apoi dedesubt bloc contint se referă la ceea ce punem în layout.pug fişier.

Dacă aveți Webpack-ul încă rulat în fundal, acesta ar trebui să se recompileze și veți obține un nou nou index.html în dumneavoastră dist / pliant. Dacă nu, rulați din nou Webpack.

Pasul 6. Prindeți tot vechiul HTML

Acele fișiere de start sunt bune și dandy, dar trebuie să facem progrese reale. Trebuie să începem să apucăm acel HTML și să-l folosim! Din fericire, pugul va recunoaște etichetele HTML vechi obișnuite, astfel încât să puteți copia literalmente tot conținutul HTML dorit și să îl lipiți acolo.

S-ar putea să arate cam așa:

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

Bine, nu este chiar atât de simplu.

Așa cum am menționat, pugul se bazează pe indentare. Pentru a vă face viața mai ușoară, vă sugerăm să eliminați toate indentările din fișierul HTML înainte de a le lipi în fișierul pug. În cea mai mare parte, va funcționa, dar probabil va trebui să-l acoperiți puțin. Noroc pentru noi, pug-html-loader ne va spune ce se întâmplă atunci când încearcă să compileze. Există câteva exemple de probleme comune în pasul următor.

Pasul 7. Începeți optimizarea

Nu voi minți, când arunci prima dată HTML, Webpack nu-i va plăcea. Iată câteva lucruri de care trebuie să țineți cont:

Imagini

  1. Asigurați-vă că linkurile către imagini sunt bune. Indiferent de motiv, de multe ori nu reușește dacă src = „images /” în loc de src = “/ images /”

2. Am promis mai devreme să mă întorc la ce ?attrs=false a fost, ei bine, iată-ne!

Acesta este discursul de la html-loader site explicând ce face asta.

Pentru a dezactiva complet procesarea atributelor de etichetă (de exemplu, dacă gestionați încărcarea imaginilor din partea clientului) puteți trece attrs=false.

html-loader?attrs=false

Javascript

pug nu se joacă frumos cu JS în etichetele de script. Dacă lipiți în deschiderea și închiderea regulată a etichetelor de script JS, este posibil să funcționeze bine. Cu toate acestea, dacă doriți să utilizați eticheta de script pug, asigurați-vă că adăugați o perioadă la final, ca aceasta:

Pasul 8. Faceți mai multe pagini și începeți să convertiți în etichete pug

În mod clar este inutil dacă faceți doar pagina index. Pentru orice faceți, creați un fișier nou pentru fiecare pagină dorită. De asemenea, asigurați-vă că faceți noi HtmlWebpackPlugin intrări în pluginuri secțiunea din Webpack.

Va sfârși prin a arăta astfel:

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

Nu trebuie să convertiți totul în format pug imediat. De fapt, dacă aveți un site imens cu o cantitate mare de HTML, atunci îl puteți face pe măsură ce mergeți, dar îl face mai ușor.

Include

Acesta nu ar fi un tutorial foarte bun dacă nu am vorbi despre include. Vă amintiți acele blocuri din fișierul de aspect? Ei bine, dacă nu doriți ca fișierul de aspect să fie gigant, puteți crea fișiere separate care vor fi extrase în timpul compilării. De exemplu, dacă doriți să creați un singur fișier care să conțină toate informațiile antetului. Despărțirea în acest fel ajută în mod substanțial la indentare.

Creați un fișier nou „header” într-un folder nou „include”:

src/
-- includes/
   header.pug

În acel fișier, puneți tot ce doriți să fie în antet.

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

Acum reveniți la layout.pug și includeți-l.

//- 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")

Pasul 7. Vrei să obții Fancy?

Există încă o mulțime de lucruri pe care le puteți face cu pug și webpack. Cu toate acestea, cred că am ajuns la sfârșitul elementelor de bază. Totuși, verificați mixins. Aceste lucruri sunt uimitoare.

Încheierea

Vă sugerez să introduceți HTML încet, altfel veți ajunge la depanarea a 1.000 de erori simultan.