Vanilla Javascript - #47 Otimizando HTML, CSS e JS

27/09/2020

Nesse tutorial vamos aprender uma forma de otimizar nosso html, nosso css e nosso javascript, deixando o código menor e menos exposto.

Otimizando CSS, HTML e JS

index.html

No index teremos a base do html com as classes que serão alteradas.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testando</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="pai">
        <div class="filho">
            <div class="sobrinho">
                �? um sobrinho
            </div>
            Testando...
        </div>
    </div>

</body>
</html>

style.css

No nosso css traremos o estilo das classes HTML

.pai{width: 100%; height: 300px; background: green;}
.filho{width: 60%; height: 100px; background: black;}
.sobrinho{width: 30%; height: 10px; background: pink;}

Agora pra fazer a magia acontecer precisamos primeiramente baixar o NodeJS

Precisamos também instalar o módulo rcs-core. Para tanto, vamos acessar o terminal do nosso sistema e ir até a pasta do nosso projeto. Posteriormente, vamos rodar o comando:

npm init
npm install --save rcs-core

index.js

No nosso entry point index.js é que ocorrerá o código para otimizar as classes:

const rcs=require('rcs-core');
const fs=require('fs');

rcs.fillLibraries(fs.readFileSync('./style.css', 'utf8'));

const css = rcs.replace.css(fs.readFileSync('./style.css', 'utf8'));
//const js = rcs.replace.js(fs.readFileSync('./src/App.js', 'utf8'));
const html = rcs.replace.html(fs.readFileSync('./index.html', 'utf8'));

fs.writeFileSync('./dist/style.css', css);
//fs.writeFileSync('./dist/App.js', js);
fs.writeFileSync('./dist/index.html', html);

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor particular? Podemos te ajudar: webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #46 Template Strings

Nesse tutorial trabalharemos com o conceito de Template Strings no Javascript. Os Templates Strings facilitam o manuseio de dados estáticos e dinâmicos.

Vanilla Javascript - #48 Api Fetch com e sem JSON e com FormData

Nesse tutorial vou explicar como utilizar a API Fetch do Javascript tendo como requisição e resposta o JSON ou application/x-www-form-urlencoded.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.