tailwind template
v1.11.9
Em primeiro lugar, certifique -se de executar pnpm install no terminal no diretório raiz deste projeto. Isso instalará todas as dependências necessárias e gerará sua pasta Node_modules . Esta etapa é muito importante.
Este projeto usa o Tailwind CSS, uma estrutura CSS de utilitário. As dependências necessárias já devem ser incluídas neste projeto. Se você estiver perdendo a pasta Node_modules , basta executar pnpm install e ele deve gerar com as dependências especificadas no arquivo package.json .
Para ativar o CSS IntelliSense, você precisará da extensão do código VS. Sugiro instalar o pacote de extensão CSS do Tailwind CSS, que vem com algumas extensões que trabalham juntas para tornar o uso de CSS do Tailwind uma experiência muito melhor. Para saber mais sobre isso, clique no link acima.
Na pasta raiz do projeto, há uma pasta de ativos/estilos . Isso abriga o arquivo Tailwind.css . Esse arquivo é usado para eventualmente gerar os estilos CSS de Tailwind totalmente compilados. Uma vez compilado, ele gera as classes para o arquivo Styles.css , também localizado na pasta Ativo/Styles .
Para trabalhar em um ambiente de desenvolvimento, execute o Script dev NPM. Para fazer isso, use qualquer método descrito abaixo.
pnpm run dev na pasta raiz do projeto.Isso iniciará um processo de relógio de longa duração que gerará seus estilos sob demanda em vez de gerar tudo com antecedência. Isso é extremamente útil para tornar o desenvolvimento mais rápido e mais eficiente. No terminal, você deve ver a mensagem de compilação inicial e a quantidade de tempo que demorou. Sempre que você salva um arquivo HTML, o arquivo Tailwind.css ou o arquivo Tailwind.config.js , o CSS será processado e recompado. Esses estilos não serão minificados no processo de desenvolvimento.
Observe que as aulas são adicionadas sob demanda, mas não removidas sob demanda. Atualmente, isso é por design, conforme declarado por Adam Wathan, o criador da Tailwind CSS. Para contornar isso (Bust It), basta salvar o arquivo Tailwind.css . Ele forçará um recipilo completo e removerá as classes não utilizadas.
Para matar o processo de relógio, coloque seu foco no terminal de que o processo o está executando e pressione CTRL + C Você deve ser solicitado a confirmar o término do processo. Confirme sua escolha digitando Y seguido pela tecla ENTER .
Usaremos uma extensão de código VS para iniciar nosso servidor. Pesquise "servidor ao vivo" na guia Extensões de código VS. Como alternativa, você pode encontrá -lo no mercado do Visual Studio.
Depois de baixar e instalar a extensão, você poderá ver um novo botão no canto inferior direito da janela na fita azul. Diz ir ao ar . Ao clicar nisso, ele deve iniciar o servidor e abri -lo no seu navegador.
Se você não vir o botão, basta clicar com o botão direito do mouse no arquivo index.html no Explorer de arquivo de código VS e clique em abrir com o servidor vivo .
A construção da produção é semelhante à construção do desenvolvimento. Faça qualquer um dos seguintes para construir o CSS para produção.
pnpm run prod na pasta raiz do projeto.prod no atalho de scripts do NPM, localizado na parte inferior esquerda da guia File Explorer no código VS.Ao contrário do script de desenvolvimento que usamos antes, isso não iniciará um processo de relógio de longa duração; Em vez disso, esse script compila o CSS uma vez e apenas uma vez. Foram necessárias apenas aulas encontradas nos arquivos HTML localizados na pasta raiz e os compilam no arquivo styles.css localizado em ativos/styles/styles.css . Esses estilos serão minificados.
Este projeto usa Gulp para construir o projeto para implantação. Ao executar o Gulp, ele criará uma pasta distiada na raiz do seu projeto. O Gulp copiará todos os arquivos necessários da fonte e os ativos do seu projeto na pasta Dist .
Além disso, Gulp também otimizará e minificará os arquivos conforme necessário. Os arquivos HTML, SVG e JavaScript serão todos minificados. Minificar um arquivo significa simplesmente remover o espaço em branco e outros caracteres/símbolos desnecessários. Fazemos isso para reduzir o tamanho dos arquivos.
Os estilos (CSS) serão copiados para o Dist também. Como o CSS já está minificado pelo uso do PostCSS e do motor JIT, não precisamos minimizá -lo aqui. É importante executar pnpm run prod antes de executar gulp . Ao não fazer isso, a Gulp usará a versão não minificada do seu CSS.
As imagens também serão copiadas também e otimizadas usando o Gulp-Image, um otimizador de imagem. Isso otimizará apenas imagens PNG, JPG e GIF. Quase todos os outros tipos de imagem serão copiados, mas não otimizados, incluindo arquivos PDF.
Então, como você usa Gulp? É muito fácil! Aqui estão três opções. 1) Abra o terminal do código VS e execute o comando gulp . Isso executará a tarefa padrão encontrada no arquivo gulpfile.js no diretório raiz. A tarefa padrão executa, em ordem, todas as outras tarefas para criar o projeto. 2) Como alternativa, criei um script da NPM chamado gulp . Você pode executar isso no canto inferior esquerdo da janela de código VS na guia Scripts NPM. 3) Se você não vir a guia Scripts do NPM, também poderá executar esse comando no terminal executando pnpm run gulp , mas nesse ponto, apenas digitar gulp é mais fácil.
No caso de você precisar alterar o nome da pasta de saída de Dist para outra coisa, simplesmente navegue até o arquivo GulpFile.js e encontre o destination variável localizado próximo à parte superior do arquivo. Por padrão, ele está definido como dist , mas você pode alterar isso substituindo a parte dist da string para o que quiser. Outro nome de pasta de destino comum é docs , que é usado para implantar um projeto nas páginas do GitHub.
