simple-web-cli
v4.4.3
Published
⚡ 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.
Downloads
115
Maintainers
Readme
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
ornpx sw start
: prepares the environment and starts the service
Build
npx sw build
npx sw build
: compiles the contents fromsrc
and zips it torelease.zip
Development
src
is the default directory of development to watchdist
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: {
start: {
root: '',
host: '',
username: '',
password: '',
},
},
}
{
// ...
ftp: {
root: '',
host: '',
user: '',
pass: '',
secure: true
}
}
- If the server doesn't use SSL certification, set
explict
orimplict
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
- Development:
You can only use one protocol at a time:
SFTP
orFTP
Some 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 thescss
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
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 💜