pug starter

Arrancador de pug

Si está buscando comenzar una carrera como desarrollador web , sea posible y acceda a los mejores trabajos de pago más alto en el mercado, visite WOW Job

Tabla de contenido

• Tutoriales en video de YouTube
• Proyectos en vivo construidos con pug-starter
• Requisitos previos
• Instalación
• Uso
• Estilo

Estructura de archivo de proyecto

 .
├── README.md
├── package.json
├── src
│   ├── _asset
│   │   ├── image
│   │   │   └── become-a-web-developer-today.jpg
│   │   │   └── logo.png
│   │   └── js
│   │       └── all.js
│   │       └── game.js
│   ├── _component
│   │   ├── header
│   │   │   ├── header.pug
│   │   │   └── header.scss
│   │   ├── footer
│   │   │   ├── footer.pug
│   │   │   └── footer.scss
│   │   ├── smart-button
│   │   │   ├── smart-button.pug
│   │   │   └── smart-button.scss
│   │   ├── project-list
│   │   │   ├── project-list.pug
│   │   │   └── project-list.scss
│   │   └── layout
│   │       ├── base.pug
│   │       └── general.scss
│   ├── _data
│   │   ├── site.yml
│   │   └── user.json
│   │   ├── menu.yaml
│   │   └── article.json
│   ├── embed.scss
│   ├── favicon.ico
│   ├── index.pug <---------------- MAIN index
│   ├── style.scss <---------------- MAIN style
│   └── contact
│       └── index.pug
│   └── portfolio
│       └── index.pug
│   └── about-me
│       └── index.pug
│   └── my-first-project
│       └── index.pug
│   └── how-i-got-to-work-with-big-companies
│       └── index.pug
└── yarn.lock

base

Nota: El atributo inline se ha actualizado para embed

Viejo camino:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` inline)

Nueva forma:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` embed)

Agregue el soporte ModularCSS . Cuando se habilita en la configuración de package.json , convertirá todos los archivos SCSS/SASS en su ruta CSS corresponsal.

Agregue el soporte de BaseURL que se puede configurar para GitHub.io y el dominio personalizado. Verifique la sección de configuración de paquete.json para

• implementTogithubio - (verdadero | falso) de forma predeterminada se establece en verdadero y afectará el valor de BaseURL cuando desee implementar en github.io; Desea configurarlo en falso si desea usar CustomurL como el valor de BaseUrl
• CustomurL - Si desea que BaseUrl tenga un valor como http://my-project.wowjob.dev o cualquier otro;
• GitHuburl : si desea que BaseUrl tenga un valor como http://github.com/marzburlea/pug-starter.git o cualquier otro;

Al final, puede usar BaseUrl para prefijo sus rutas como:

 link(rel="stylesheet", href=`${baseUrl}/style.css`)

o

 a(
  title="Is it possible?"
  target="_blank"
  href=`${baseUrl}/article/nice-weather`
)

o

 img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)

Tutoriales en video de YouTube

Quiero cambiar esos tutoriales a nuevos utilizando las nuevas técnicas.

Para ayudarte aún más, he reunido algunos tutoriales de YouTube:

• Instalar NodeJs, Git y Github

• Cómo hacer un sitio web gratis en 3 sencillos pasos 2017

• ¡La pesadilla finalmente ha terminado! Tutorial HTML5 sobre cómo crear un diseño de página web 2017

• Construir el sitio web de HTML5 Tutorial gratuito para principiantes 2017

Paquete de inicio para proyectos basados ​​en plantillas Pug (antiguos Jade).

Nota : Se ha agregado una opción booleana config.render.sourceFilechange al paquete.json . El comportamiento difiere en función del valor:

1. Verdadero : se convierte en si el archivo fuente (archivo PUG) ha cambiado; Esto tiene una velocidad mucho mayor cuando se renderiza en comparación con la otra opción, sin embargo, solo es relevante si realiza el cambio en el archivo actual que se ve por PUG. Si realiza un cambio en un archivo que se extiende y reside en una ruta que contiene "_", como un diseño, el cambio no se reflejará.
2. FALSO : representa si se ha cambiado algún archivo PUG y compara la salida con el archivo de destino (el HTML generado ahora con el HTML generado anterior). Esto puede ser más lento cuando aumenta el número de archivos.

Proyectos en vivo construidos con pug-starter

Si desea que su proyecto se enumere aquí, deje un mensaje en Codetap en Facebook. Su proyecto debe ser al menos la versión una final (no se aceptará beta / alfa o trabajo en progreso).

• Autor: Marian Zburlea
  • Come The Veggie (Live) - Eat the Veggie (fuente)
  • Réplica de W3Schools (en vivo) - réplica de W3Schools (fuente)
  • Mi currículum (en vivo) - mi currículum (fuente)
  • Blog rápido (en vivo) - Blog rápido (fuente)
  • Tesla salva vidas (en vivo) - Tesla salva vidas (fuente)
• Autor: Istvan ACS
  • ACME Mobile First (Live) - ACME Mobile First (fuente)
  • Galería Thumb (en vivo) - Galería Thumb (fuente)

Requisitos previos

El proyecto requiere NodeJS v.4+

Para instalar NodeJS, visite la página de descarga de NodeJS Descargue el paquete Apropiate para su sistema operatín, haga clic en el archivo descargado, abríjelo y siga los procedimientos de instalación. Si no sabe mucho al respecto, simplemente haga clic en todos los botones a continuación e instale y elija "Estoy de acuerdo" cuando se le solicite y debería estar bien.

Instalación

Antes de instalar: lea los requisitos previos

$ npm i

o

$ npm install

Nota: Si se encuentra con un error de PNGQUANT-BIN en Windows, intente ejecutar:

 npm install [email protected] -D
npm install [email protected] -D

Antes de ejecutar npm start

Uso

Para ejecutar el proyecto en modo de desarrollo y abrir un servidor local que sincroniza a través del uso de múltiples dispositivos:

npm start

o

npm run dev

Para construir el proyecto para el uso de producción:

npm run prod

Para implementar automáticamente su proyecto en las páginas de GitHub y ponerlo a disposición en https: // [your-username] .github.io/[your-project-name] use:

npm run deploy

Estilo

El proyecto admite hojas de estilo integral y de estilo externo . Puede tener ninguno, uno u otro, o ambos.

Estilo de aplicación de una sola página

Cuando está creando una aplicación o sitio web de una sola página, no tiene sentido que las hojas de estilo se carguen desde un archivo externo y explicaré por qué: el punto de cargar hojas de estilo externo es permitir que el navegador almacene en caché esos archivos y una vez que visite otra página web del mismo sitio web, en lugar de hacer otra solicitud (s) para el archivo de estilo (s) de estilo al servidor y tener que descargarlos, si no hay cambios, el browser los cargará desde el motor local. En una sola página, no hay otra página para ir, por lo tanto, la técnica de archivo externo no se aplica.

Estilo de aplicación de múltiples páginas

En este escenario, puede tener incrustación y externo o externo. El escenario más común es tener solo un archivo de hoja de estilo externo para cargar y la mayoría de las veces está bien.

Si desea mejorar aún más su SEO y su experiencia del usuario, recomiendo utilizar una combinación de incrustación y externa. La hoja de estilo de incrustación solo debe contener la cantidad mínima de estilos para que la parte visible inicial de la página se presente. El resto de los estilos se pueden colocar en el archivo CSS externo.

RESET AUTO GIT

Si ejecuta npm i , el historial Git se restablecerá.

Para evitar restablecer el historial de git, ejecuta npm i --ignore-scripts