Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wellwelwel/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.
https://github.com/wellwelwel/simple-web-cli
automation browser build bundle compiler dom esmodules ftp modules pipeline sftp sync typescript watch watcher
Last synced: 9 days ago
JSON representation
⚡ 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.
- Host: GitHub
- URL: https://github.com/wellwelwel/simple-web-cli
- Owner: wellwelwel
- License: mit
- Created: 2021-10-29T22:26:57.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T08:21:33.000Z (over 1 year ago)
- Last Synced: 2024-10-19T11:25:45.312Z (19 days ago)
- Topics: automation, browser, build, bundle, compiler, dom, esmodules, ftp, modules, pipeline, sftp, sync, typescript, watch, watcher
- Language: JavaScript
- Homepage:
- Size: 1.08 MB
- Stars: 5
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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
```shell
npm i simple-web-cli -D
```
### Usage
#### Create
```shell
npx sw create
```
- `npx sw create`: prepares the environment without starting the service
#### Start | Watch
```shell
npx sw
```
- `npx sw` or `npx sw start`: prepares the environment and starts the service
#### Build
```shell
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
```javascript
// File: ./src/index.js
import { s } from 'node-and-vite-helpers';
const body = s('body');
```
>
> ```javascript
> // Output to ./dist/index.js:
>
> !function(){"use strict";var e="body";document.querySelector(e)}();
> ```
- Import from local modules
```javascript
// 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));
```
>
> ```javascript
> // 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
```javascript
{
// ...
sftp: {
start: {
root: '',
host: '',
username: '',
password: '',
},
},
}
```
```javascript
{
// ...
ftp: {
root: '',
host: '',
user: '',
pass: '',
secure: true
}
}
```
- The [`sftp`](https://github.com/wellwelwel/basic-sftp) connection options extends all the [`ssh2`](https://github.com/mscdex/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`
```html
Title
Paragraph
```
`OUTPUT`
```html
Title
Paragraph
```
#### HTML Import
- You can import `.html` files recursively, based on the `scss` import, for example:
```html
```
#### CSS | Sass
`INPUT`
```css
div {
display: flex;
}
```
`OUTPUT`
```css
div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
```
#### PHP | PHTML
`INPUT`
```php
$var = 'text'
?>
=$var?>
```
`OUTPUT`
```php
=$var?>
```
#### Apache (.htaccess, php.ini)
`INPUT`
```apache
# comment
# another comment
Options Indexes FollowSymLinks MultiViews
```
`OUTPUT`
```apache
Options Indexes FollowSymLinks MultiViews
```
#### Strings Replacement
- You can create an easy to read code and on compiling, replace the specified strings, for example:
`.swrc.js`
```javascript
{
strings: {
'*token*': {
start: '123',
build: '456'
},
'*site-name*': {
start: 'dev.weslley.io',
build: 'weslley.io'
}
}
}
```
`INPUT`
```php
$_POST['*token*'];
$site = '*site-name*';
```
`OUTPUT DEV (npx sw)`
```php
#### Miscellaneous Files
- Only uploads the original file to the output directories
### Compatibility
### License
[](/LICENSE)
[](/docs/LICENSE_THIRD_PARTY.md)
### Credits
#### Contributors
| Contributions | GitHub |
| ---------------- | ----------------------------------------------------------------------------------------------- |
| Author | [](https://github.com/wellwelwel) |
| Translate en-US | [](https://github.com/SrLaco) |
| Translate Review | [](https://github.com/micaele-mags) |
#### `Create` dev dependencies
- [@babel/preset-env](https://babel.dev/docs/en/next/babel-preset-env)
- [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel#readme)
- [@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs/#readme)
- [@rollup/plugin-node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve/#readme)
- [@rollup/plugin-terser](https://github.com/rollup/plugins/tree/master/packages/terser#readme)
- [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript/#readme)
- [@types/ssh2](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/ssh2)
- [autoprefixer](https://github.com/postcss/autoprefixer#readme)
- [node-and-vite-helpers](https://github.com/wellwelwel/node-and-vite-helpers#readme)
- [packages-update](https://github.com/wellwelwel/packages-update#readme)
- [postcss-cli](https://github.com/postcss/postcss-cli#readme)
- [rollup](https://rollupjs.org/)
- [sass](https://github.com/sass/dart-sass)
- [tslib](https://www.typescriptlang.org)
- [uglify-js](https://github.com/mishoo/UglifyJS#readme)
**Made with _sadness_ and _sorrow_ in rainy nights by [Weslley Araújo](https://github.com/wellwelwel)** 💜