pug starter
Render multiple CSS support
Se você deseja iniciar uma carreira como desenvolvedor da web , torne -se contratível e acesse os melhores empregos com mais salários do mercado, visite Wow Job
.
├── 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
Nota: o atributo inline foi atualizado para embed
Caminho antigo:
if config.entry.css.embed
link(rel="stylesheet" href=`${embedPath}` inline)
Nova maneira:
if config.entry.css.embed
link(rel="stylesheet" href=`${embedPath}` embed)
Adicione suporte modularcss . Quando ativado na configuração do package.json , ele converterá todos os arquivos SCSS/SASS em seu caminho CSS correspondente.
Adicione o suporte BaseUrl , que pode ser configurado para o Github.io e o domínio personalizado. Verifique a seção de configuração do pacote.json para
No final, você pode usar o Baseurl para prefixar seus caminhos como:
link(rel="stylesheet", href=`${baseUrl}/style.css`)
ou
a(
title="Is it possible?"
target="_blank"
href=`${baseUrl}/article/nice-weather`
)
ou
img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)
Quero alterar esses tutoriais para novos usando as novas técnicas.
Para ajudá -lo ainda mais, reuni alguns tutoriais do YouTube:
Pacote inicial para projetos baseados em modelos Pug (antigo Jade).
Nota : Uma opção booleana config.render.sourceFileChange foi adicionada ao package.json . O comportamento difere com base no valor:
Se você deseja que seu projeto seja listado aqui, deixe uma mensagem no Codetap no Facebook. Seu projeto precisa ser pelo menos a versão um final (sem beta / alfa ou trabalho em andamento) será aceito.
O projeto requer nodejs v.4+
Para instalar o NodeJS, visite a página de download do NodeJS download do pacote apropado para o seu sistema de operações, clique no arquivo baixado, abra -o e siga os Proceas de Instalação. Se você não souber muito sobre isso, basta clicar em todos os botões seguintes e instalar e escolher "eu concordo" quando solicitado e você ficará bem.
Antes de instalar: leia os pré -requisitos
$ npm iou
$ npm installNOTA: Se você encontrar um erro pngquant-bin no Windows, tente executar:
npm install [email protected] -D
npm install [email protected] -D
Antes de executar npm start
Para executar o projeto no modo de desenvolvimento e abrir um servidor local que sincroniza em vários dispositivos use:
npm startou
npm run devPara construir o projeto para uso da produção:
npm run prodPara implantar automaticamente seu projeto nas páginas do GitHub e disponibilizá-lo em https: // [your-username] .github.io/[your-project-name] use:
npm run deployO projeto suporta folhas de estilo incorporado e externas . Você não pode ter nenhum, um ou outro, ou ambos.
When you're building a single page app or website, there is no point in having the style sheets loaded from an external file and I'll explain why: the point of loading external style sheets is to allow the browser to cache those files and once you visit another web page of the same website, instead of making another request(s) for the style sheet file(s) to the server and having to download them, if there is no change, the browser will load them from the local drive. Em uma única página, não há outra página para ir para, portanto, a técnica de arquivo externo não se aplica.
Nesse cenário, você pode ter incorporado e externo ou apenas externo. O cenário mais comum é ter apenas um arquivo de folha de estilo externo a ser carregado e na maioria das vezes está bem.
Se você deseja melhorar ainda mais seu SEO e experiência do usuário, recomendo fortemente usar uma combinação de incorporação e externa. A folha de estilo incorporado deve conter apenas a quantidade mínima de estilos para a parte visível inicial da página para renderizar. O restante dos estilos pode ser colocado no arquivo CSS externo.
Se você executar npm i , o histórico do GIT será reiniciado.
Para evitar a redefinição da história do git, execute npm i --ignore-scripts
