Skip to content

⚡ A simple compiler to automate the development in HTML, CSS, SCSS, JS, TS and PHP languages, focused on Shared Hosts and using SFTP or FTP to deploy files processed automatically to final server.

License

Notifications You must be signed in to change notification settings

wellwelwel/simple-web-cli

Repository files navigation

simple-web-cli

Simple Web CLI

⚡ A simple compiler to automate the development in HTML, CSS | SCSS, JS | TS and PHP languages, focused on Shared Hosts and using SFTP or FTP to deploy files processed automatically to final server.

Install

   npm i simple-web-cli -D

Usage

Create

   npx sw create
  • npx sw create: prepares the environment without starting the service

Start | Watch

   npx sw
  • npx sw or npx sw start: prepares the environment and starts the service

Build

   npx sw build
  • npx sw build: compiles the contents from src and zips it to release.zip

Development

  • src is the default directory of development to watch
  • dist is the default directory with the compiled code
  • Once the process is started, the event occurs by saving any file into src.
  • All options are preconfigured and you can customize them 😉

Features

ES Modules to Native Browser Javascript

  • Import from external modules

    // File: ./src/index.js
    
    import { s } from 'node-and-vite-helpers';
    
    const body = s('body');
    // Output to ./dist/index.js:
    
    !function(){"use strict";var e="body";document.querySelector(e)}();
  • Import from local modules

    // File ./helpers/sum.js
    const sum = (a, b) => a + b;
    export default sum;
    
    // File: ./src/index.js
    import sum from '../helpers/sum';
    
    console.log(sum(1, 2));
    // Output to ./dist/index.js:
    
    !function(){"use strict";console.log(3)}();

Using SFTP or FTP HotSync

  • In the file .swrc.js, just insert the access infos:
SFTP FTP
{
   // ...

   sftp: {
      start: {
         root: '',
         host: '',
         username: '',
         password: '',
      },
   },
}
{
   // ...

   ftp: {
      root: '',
      host: '',
      user: '',
      pass: '',
      secure: true
   }
}
  • The sftp connection options extends all the ssh2 options
  • If the server doesn't use SSL certification, set explict or implict
  • Assuming the root option is / and the remote directory is /var/www, the input and output of the directories would be:

    • Development: ./src/ html/index.html
    • Distribution: ./dist/ html/index.html
    • Server: /var/www/ html/index.html
  • You can only use one protocol at a time: SFTP or FTP


Some Examples

View examples

HTML

INPUT

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

OUTPUT

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

HTML Import

  • You can import .html files recursively, based on the scss import, for example:
    <html>
       <body>
          <!-- import('./views/_header.html') -->
          <section>
             <!-- import('./views/_main.html') -->
          </section>
          <!-- import('../_footer.html') -->
       </body>
    </html>

CSS | Sass

INPUT

div {
   display: flex;
}

OUTPUT

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

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:

.swrc.js

{
   strings: {
      '*token*': {
         start: '123',
         build: '456'
      },
      '*site-name*': {
         start: 'dev.weslley.io',
         build: 'weslley.io'
      }
   }
}

INPUT

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

OUTPUT DEV (npx sw)

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

OUTPUT BUILD (npx sw build)

<?php $_POST['456'];$site='weslley.io';
  • Works for any language that is enabled in .swrc.js

Miscellaneous Files

  • Only uploads the original file to the output directories

Compatibility

macOS Linux Windows node


License

License 3rd-Party Software License


Credits

Contributors

Contributions GitHub
Author wellwelwel
Translate en-US SrLaco
Translate Review micaele-mags

Create dev dependencies


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

About

⚡ A simple compiler to automate the development in HTML, CSS, SCSS, JS, TS and PHP languages, focused on Shared Hosts and using SFTP or FTP to deploy files processed automatically to final server.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks