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, Sass, JavaScript and PHP languages, focused on Shared Hosts and using FTP to deploy files processed automatically to final server.

  • 4.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
95
increased by2275%
Maintainers
1
Weekly downloads
 
Created
Source

simple-web-cli

Simple Web CLI

⚡ A simple compiler to automate the development in HTML, CSS, Sass, JavaScript and PHP languages, focused on Shared Hosts and using 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

  • scr 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.

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)}();
    

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>
    

FTP Hotsync
  • In the file .swrc.js, just insert the access infos:

    {
       ftp: {
          root: '',
          host: '',
          user: '',
          pass: '',
          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
    • Server: /var/www/html/index.html

Using TypeScript
  • Install TypeScript modules

    npm i tslib @rollup/plugin-typescript -D
    
  • In rollup.config.js:

    • Import the pluguin module:
      import typescript from '@rollup/plugin-typescript';
      
    • Add the plugin to defineConfig:
      {
         ...,
         plugins: [
            ...,
            typescript(),
         ],
      };
      
  • It's done! 😉


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}

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 npm


License

License 3rd-Party Software License

FOSSA Status


Credits

Contributors
ContributionsGitHub
Authorwellwelwel
Translate en-USSrLaco
Translate Reviewmicaele-mags

Create dependencies

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

Keywords

FAQs

Package last updated on 21 Dec 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