# multi-assets-combine
> Combine HTML/CSS/Javascript files into single file
Latest version **1.0.3** (published 2022-05-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install multi-assets-combine
pnpm add multi-assets-combine
yarn add multi-assets-combine
bun add multi-assets-combine
```
Provides the command `mult-assets-combine`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-05-21 |
| First published | 2022-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Abdulrahman Qutaiba |
| Maintainers | abdullrahman02000 |
| Keywords | Combine, HTML, CSS, Javascript |
## Links
- npm: https://www.npmjs.com/package/multi-assets-combine
- npm.io page: https://npm.io/package/multi-assets-combine
## Dependencies (1)
- [node-html-parser](https://npm.io/package/node-html-parser.md) ^5.3.3
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2022-05-21
- 1.0.2 — 2022-05-21
- 1.0.1 — 2022-05-21
- 1.0.0 — 2022-05-21
## README
# Multi Assets Combine
Combine HTML/CSS/Javascript files into single file.
## Get Started
To install this package
`npm install --save-dev multi-assets-combine`
Create four files:
[index.html]()
```
```
[style.css]()
```
button {
border: none;
background: #1d2fbb;
padding: 1rem 1.5rem;
text-transform: uppercase;
font-size: 0.75rem;
border-radius: 0.4em;
color: white;
font-weight: bold;
}
button:hover {
transform: translateY(-0.3em);
background: #0218bb;
cursor: pointer;
box-shadow: 0 0 4px 1px rgba(0,0,0,0.3);
}
```
[script.js]()
```
window.addEventListener('DOMContentLoaded', () => {
console.log("DOM Content loaded")
})
```
[combine.config.json]()
```
{
"input": "index.html",
"output": "output.html",
"style": "style.css",
"script": "script.js"
}
```
Run the following command:
`npx multi-assets-combine --config=combine.config.json`
Your [output.html]()
```
```
To watch changes on [index.html]() run:
`npx multi-assets-combine --config=combine.config.json --watch`
## Configuration (JSON file)
| Key | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `input` | `string` | **Required**. Specify input html file |
| `output` | `string` | **Required**. Specify output html file.
| `style` | `string \| object \| string[] \| object[]` | Specify style(s) to be implemeneted in output file. |
| `script` | `string \| object \| string[] \| object[]` | Specify script(s) to be implemeneted in output file. |
### Style(s) | Script(s)
The style|script can be `string` represent css/js file path or `object` to specify more properties along with path
**Example**
```
{ ...
"style": [
{
"path": "style1.css",
"target": "body"
},
"style2.css"
]
... }
```
### Style | Script options
| Key | Type | Description
|:----------|:---------|:--------------
| target | `string` | Specify where to place style/script, defaults are `"body"` for script and `"head"` for style.
| path | `string` | **Required**. It can be URL or file path. **Note**: only supports redirect 301 if target resource do redirects (Especially when http protocol was specified).
| removeLink| `string \| object \| string[] \| object[]` | Remove previous `link \| script` tag in input html (If previous tag was referring to standalone asset), Example: link tag has reference to `style.css` but since the tool will combine `style.css`, there is no need to keep link tag.
#### Example
```
{
"style": {
"path": "style1.css"
"target": "head",
"removeLink": ["style1.css", "style2.css"]
},
"script": {
"path": "script.js",
"target": "body",
"removeLink": "script.js"
}
}
// HTML file
.....
// Output HTML
.....
.....
```
Example above shows how to combine content of `style1.css`, `script.js` file and remove related links;
The tool will look for link tags with href == `source` and `script` tags with src = `source` and remove them from their container (default is script/style container)
### Remove Link(s)
Each `RemoveLink` can be `string` or `object`, table below shows keys within `RemoveLink` object
| Key | Type | Description
|:----------|:---------|:--------------
| source | `string` | **Required**. Specify value of `href` or `src` for `script` or `link` to search, to delete them from their container
| target | `string` | **Required**. Specify selector for which element to delete link from. Default is same container for "script" or "style"
#### example
```
{
"script": {
"path": "script.min.js",
"target": "head",
"removeLink": [
{
"source": "chunk1.js",
"target": "body"
},
"chunk2.js"
]
}
}
// HTML file
// Output HTML
```
Example above add content of script file `script.js` to `head` where `script.target == "head"`
then it removes `