simple-web-pro

simple-web

Um simples compilador para automatizar o desenvolvimento nas linguagens HTML, CSS/Sass, JavaScript e PHP utilizando conexão FTP para enviar os arquivos processados automaticamente para o servidor final.

---

- Inicialização

• npm i ou yarn --ignore-engines para baixar as dependências
• npm start ou yarn start para iniciar o serviço

---

- Desenvolvimento

• scr é o diretório de desenvolvimento
• .main é o diretório com o código compilado

---

- Configurando o FTP

• No arquivo .web-config.json, basta inserir as informações de acesso:

   "ftp": {
      "root": "_DIRETORIO_RAIZ_",
      "host": "_IP_",
      "user": "_USUARIO_",
      "pass": "_SENHA_",
      "secure": true
   }

- caso não seja inserido nenhum acesso, ele criará o projeto normalmente, apenas ignorando o envio FTP
- se o FTP não possuir certificação SSL, utilize "explict" em "secure"

• Supondo que o diretório root seja /var/www, a entrada e saída dos diretórios seria:

  • Desenvolvimento: src/html/index.html
  • Distribuição: .main/html/index.html
  • FTP: /var/www/html/index.html

---

- Utilizando

• Uma vez iniciado o processo com npm start ou yarn start, o evento ocorre ao salvar qualquer arquivo dentro do diretório src.

---

- Exemplos

---

HTML

ENTRADA

   <div>
      <h1>Título</h1>
      <p>Parágrafo</p>
   </div>

SAÍDA

   <div><h1>Título</h1><p>Parágrafo</p></div>

---

CSS | Sass

ENTRADA

   div {
      display: flex;
   }

SAÍDA

   div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}

---

JavaScript

ENTRADA

   (() => {
      require('web/selector');

      const element = s('body');
      const inElement = sEl(element, 'div');
      const elements = sAll('.class');
      const elementsInElement = sElAll(element, '.class');
   })();

SAÍDA

   "use strict";!function(){var e,c,l,r,t=(e="body",document.querySelector(e));c="div",t.querySelector(c),l=".class",document.querySelectorAll(l),r=".class",t.querySelectorAll(r)}();

---

PHP | PHTML

ENTRADA

<?
   $var = 'texto'
?>

<div>
   <?=$var?>
</div>

SAÍDA

  <?php $var='texto'?><div><?=$var?></div>

---

Apache (.htaccess, php.ini)

ENTRADA

# comment
<Directory /var/www/>
   # another comment
   Options Indexes FollowSymLinks MultiViews
</Directory>

SAÍDA

<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
</Directory>

---

Arquivos gerais

• Apenas envia o arquivo original para os diretórios de saída

---

Módulos Locais

• No JavaScript Web, é possível importar módulos locais salvos dentro dos arquivos, por exemplo:

.library/meu-script/index.js

   require('web/meu-script'); /* para importação completa do arquivo */
   const meu_script = require('web/meu-script'); /* para importar o módulo em uma variável */

---

Substituição de Textos

• É possível criar um código de fácil leitura e ao compilar, substituir os textos específicados. Por exemplo:

- funciona em qualquer linguagem que estiver habilitada em .web-replace.json

.web-replace.json

{
   "strings": {
      "*token*": {
         "dev": "0cfcda42c340dad5616e0b7449a5634b",
         "build": "0cfcda42c340dad5616e0b7449a5634b"
      },
      "*site-name*": {
         "dev": "dev.weslley.io",
         "build": "weslley.io"
      }
   }
}

ENTRADA

<?
   $_POST['*token*'];
   $site = '*site-name*';

SAÍDA DEV (npm start | yarn start)

<?php $_POST['0cfcda42c340dad5616e0b7449a5634b'];$site='dev.weslley.io';

SAÍDA BUILD (npm run build | yarn build)

<?php $_POST['0cfcda42c340dad5616e0b7449a5634b'];$site='weslley.io';

---

- Compatibilidade

Sistemas Operacionais

• macOS
• Linux
• Windows

Editores

• Visual Studio Code
• Outros (as funcionalidades dependem apenas do Terminal, porém, outros editores podem não ser compatíveis com sugestões de módulos locais)

Extensões Recomendadas (VSCode)

• ESLint - Dirk Baeumer
• npm Intellisense - Christian Kohler
• Path Intellisense - Christian Kohler
• Visual Studio IntelliCode - Microsoft

Feito com dor e sofrimento em noites frias por Weslley Araújo 🖤