Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

simple-web-cli

Package Overview
Dependencies
Maintainers
1
Versions
92
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-web-cli

⚡ 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.

  • 3.2.3
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

simple-web-cli

Simple Web CLI

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

English · Português

Install

   npm i simple-web-cli -D  # to download the dependencies
   npx sw  # to start the service

Development

  • scr is the directory of development
  • dist is the directory with the compiled code

Commands

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

Using

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

Features

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>
    

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

    .library/my-script/index.js

       /* for entire file import */
       require('web/my-script');
    
       /* to import the default module into a variable */
       const my_script = require('web/my-script');
    
       /* to import the modules by destronstuct variables */
       const { my_script1, my_script2 }  = require('web/my-script');
    
       /* to import the module into a variable with a custom name */
       const my_name_var = require('web/my-script').my_script1;
    

Enable the FTP
  • In the file .swrc.js, just insert the acess infos:

    {
       ftp: {
          root: '_ROOT_DIRECTORY_',
          host: '_IP_',
          user: '_USER_',
          pass: '_PASSWORD_',
          secure: true || 'explict'
       }
    }
    
  • Assuming the root directory is /var/www, the input and output of the directories would be:

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

Some Examples

View 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:

.swrc.js

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

INPUT

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

OUTPUT DEV (npx sw)

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

OUTPUT BUILD (npx sw build)

<?php $_POST['0cfcda42c340dad5616e0b7449a5634b'];$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 npm


License

License 3rd-Party Software License

FOSSA Status


Credits

ContributorsGitHub
Authorwellwelwel
Translate en-USSrLaco
Translate Reviewmicaele-mags

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

Keywords

FAQs

Package last updated on 13 Sep 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc