diff --git a/README.md b/README.md index 3dc5e84..6ebb0f7 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,41 @@ -[![Build Status](https://travis-ci.org/hamzaalalach/jscomps.svg?branch=master)](https://travis-ci.org/hamzaalalach/jscomps) ![NPM](https://img.shields.io/npm/l/jscomps) ![npm](https://img.shields.io/npm/v/jscomps) ![GitHub last commit](https://img.shields.io/github/last-commit/hamzaalalach/jscomps)
-# jscomps +

JSComps

+

+ JSComps is a lightweight CLI solution to enable components support on Vanilla JS. +

- JSComps is a lightweight solution to enable components support on Vanilla JS.

+
-#### Note: - JSComps is a CLI package, check usage below.

-#### Why not just create multiple HTML files and link them to HTML instead? -Using JSComps gives your the following perks: +[![Build Status](https://travis-ci.org/hamzaalalach/jscomps.svg?branch=master)](https://travis-ci.org/hamzaalalach/jscomps) ![NPM](https://img.shields.io/npm/l/jscomps) +![npm](https://img.shields.io/npm/v/jscomps) +![GitHub last commit](https://img.shields.io/github/last-commit/hamzaalalach/jscomps) -- It generates one simple file as input giving multiple as input, by linking only one external JS file, you're reducing your HTTP requests, making your app faster and more performent. -- It makes your app easily scalable. You can address each part of your website with JavaScript individually, making it easy to focus on and edit your code, and expanding its functionalities at ease. -- It's easy to use. You don't have to run it each time you make a change to a file, it'll automatically detect changes for you and import them to your output file.

+## Description + JSComps helps you chunk Vanilla JS into small and scalable components. It takes a folder as input which works as the components container, it detects changes in it, if any made it'll automaticaly import all the parts into the minified output file. By default, the imports should be contained in the provided folder under the same name, and the output looks like this: providedfoldername.min.js. [See examples below.](#examples)

+ + ## Install -``` + +```bash npm install jscomps -g ``` - OR -``` + +```bash yarn add jscomps ``` -
+

## Usage jscomps [options] - JSComps takes a folder as input and it works as the components container, it detects changes in it, if any made it'll import all the components into the minified output file. By default, the imports should be contained in the provided folder under the same name, and the output looks like this: providedfoldername.min.js. See examples below. + Please make sure it's installed globally.

## Options -``` +```text -f Component folder to watch. [string] [required] -w Watch a directory for changes. [boolean] [default: true] @@ -43,67 +46,76 @@ yarn add jscomps -v, --version Show version number. [boolean] ``` +

## Examples Consider we are in the following folder: ``` js/ - dashboard/ - dashboard.js - header.js - nav.js - sideBar.js + └── dashboard/ + ├── dashboard.js + ├── header.js + ├── nav.js + └── sideBar.js ``` Each of the files has the following content: - header.js: -``` +```javascript console.log("Header script is running..."); ``` - nav.js: -``` +```javascript console.log("Nav script is running..."); ``` - sideBar.js: -``` +```javascript console.log("Sidebar script is running..."); ``` -Our import file, which is dashboard.js the same as our component folder's name, should look like this: -``` +The import file, which is dashboard.js by default, should look like this: +```javascript import "header"; import "nav"; import "sideBar"; ``` We can now watch for changes and automatically concat our component pieces running the following command: -``` +```bash jscomps -f js/dashboard -m false ``` Making any change to the 3 pieces of our component will trigger the output file to be generated ```dashboard.min.js``` in the dashboard folder, containing the following code: -``` +```javascript console.log("Header script is running..."); console.log("Nav script is running..."); console.log("Sidebar script is running..."); ``` To compress the output code simply remove the -m parameter as it is by default set to true: -``` +```bash jscomps -f js/dashboard ``` We can stop watching for changes and use the command only once: -``` +```bash jscomps -f js/dashboard -w false ``` To provide a custom input and/or output file path, use the -o and -i commands: -``` +```bash jscomps -f js/dashboard -i js/dashboard/index.js -o js/dashboard.js ``` The best way to use JSComps is to add it to your package.json file like this: -``` +```json "scripts": { "jscomps:dashboard": "jscomps -f public/js/dashboard" } ``` -Then your run it easily like this: ` npm run jscomps:dashboard ` +Then your run it easily like this: ` npm run jscomps:dashboard `

+ +## Versioning + +We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/hamzaalalach/jscomps/tags).

+ +## License + +This project is licensed under the MIT License. See the [LICENSE.md](LICENSE) file for details.