Simple Web CLI
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 -DUsage
Create
npx sw create-
npx sw create: prepares the environment without starting the service
Start | Watch
npx sw-
npx swornpx sw start: prepares the environment and starts the service
Build
npx sw build-
npx sw build: compiles the contents fromsrcand zips it torelease.zip
Development
-
srcis the default directory of development to watch -
distis 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
}
} |
|
-
Assuming the
rootoption 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
-
Development:
-
You can only use one protocol at a time:
SFTPorFTP
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
.htmlfiles recursively, based on thescssimport, 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
License
Credits
Contributors
| Contributions | GitHub |
|---|---|
| Author |  |
| Translate en-US |  |
| Translate Review |  |
Create dev dependencies
- @babel/preset-env
- @rollup/plugin-babel
- @rollup/plugin-commonjs
- @rollup/plugin-node-resolve
- @rollup/plugin-terser
- @rollup/plugin-typescript
- @types/ssh2
- autoprefixer
- node-and-vite-helpers
- packages-update
- postcss-cli
- rollup
- sass
- tslib
- uglify-js
Made with sadness and sorrow in rainy nights by Weslley Araújo