hartl3y94 / simple-web

⚡ A simple compiler to automate the development in HTML, CSS, JavaScript and PHP languages using FTP connection to deploy the processed files automatically to the final server.

simple-web

A simple compiler to automate the development in the HTML, CSS/Sass, JavaScript and PHP languages using the FTP connection to deploy files processed automatically to the final server.

English · Português

Install

• Local

   npm i simple-web-cli  # to download the dependencies

   npx simple-web  # to start the service

• Global

   npm i simple-web-cli -g  # to download the dependencies

   simple-web  # to start the service

---

- Development

• scr is the directory of development
• .main is the directory with the compiled code

---

- Commands

• npx simple-web or npx simple-web start: prepares the environment and starts the service
• npx simple-web init: prepares the environment without starting the service
• npx simple-web buid: compiles the contents from src and zips it to release.zip

---

- Configuring the FTP

• In the file .web-config.json, just insert the acess infos:

   "ftp": {
      "root": "_ROOT_DIRECTORY_",
      "host": "_IP_",
      "user": "_USER_",
      "pass": "_PASSWORD_",
      "secure": true
   }

• Assuming the root directory is /var/www, the input and output of the directories would be:

  • Development: src/html/index.html
  • Distribution: .main/html/index.html
  • FTP: /var/www/html/index.html

- If no access is entered, it will create the project normally, just ignoring the FTP upload
- If the FTP doesn't use SSL certification, set "explict" in "secure"

---

- Local Modules

• In JavaScript (web), it's possible to import local modules saved into .library, for example:

.library/my-script/index.js

   require('web/my-script'); /* for entire file import */
   const my_script = require('web/my-script'); /* to import the module into a variable */

---

- Using

• Once the process is started, the event occurs by saving any file into src.

Some Examples

HTML

INPUT

   <div>
      <h1>Title</h1>
      <p>Paragraph</p>
   </div>

OUTPUT

   <div><h1>Title</h1><p>Paragraph</p></div>

---

CSS | Sass

INPUT

   div {
      display: flex;
   }

OUTPUT

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

---

JavaScript

INPUT

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

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

OUTPUT

   "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

INPUT

<?
   $var = 'text'
?>

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

OUTPUT

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

---

Apache (.htaccess, php.ini)

INPUT

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

OUTPUT

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

---

Strings Replacement

• You can create an easy to read code and on compiling, replace the specified strings, for example:

- works for any language that is enabled in .web-replace.json

.web-replace.json

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

INPUT

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

OUTPUT DEV (npx simple-web)

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

OUTPUT BUILD (npx simple-web build)

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

---

Miscellaneous Files

• Only uploads the original file to the output directories

---

- Compatibility

Operational Systems

• macOS
• Linux
• Windows

Code Editors

• Visual Studio Code
• Others (the features depend only on Terminal, however, other editors may not suggest local modules intellisense)

Recomended Extensions (VSCode)

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

• Translate: SrLaco
• Review: micaele-mags

Made with sadness and sorrow in rainy nights by Weslley Araújo 🖤

---