Socket
Socket
Sign inDemoInstall

simple-web-cli

Package Overview
Dependencies
201
Maintainers
1
Versions
92
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    simple-web-cli

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


Version published
Weekly downloads
0
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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:
SFTPFTP
{
   // ...

   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
ContributionsGitHub
Authorwellwelwel
Translate en-USSrLaco
Translate Reviewmicaele-mags

Create dev dependencies

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

Keywords

FAQs

Last updated on 16 May 2023

Did you know?

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc