# roi-esbuild-tasks

> Common tasks for web projects Roiback

Latest version **1.0.0** (published 2023-03-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install roi-esbuild-tasks
pnpm add roi-esbuild-tasks
yarn add roi-esbuild-tasks
bun add roi-esbuild-tasks
```

## 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.0 |
| Published | 2023-03-30 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Roiback |
| Maintainers | jfredy05 |

## Links

- npm: https://www.npmjs.com/package/roi-esbuild-tasks
- Repository: git@git.roiback.com:statics/roi-esbuild-tasks
- npm.io page: https://npm.io/package/roi-esbuild-tasks

## Dependencies (14)

- [sass](https://npm.io/package/sass.md) ^1.60.0
- [chalk](https://npm.io/package/chalk.md) ^5.2.0
- [eslint](https://npm.io/package/eslint.md) ^8.37.0
- [cssnano](https://npm.io/package/cssnano.md) ^6.0.0
- [esbuild](https://npm.io/package/esbuild.md) ^0.17.14
- [postcss](https://npm.io/package/postcss.md) ^8.4.21
- [clean-css](https://npm.io/package/clean-css.md) ^5.3.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.21.3
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.14
- [generate-changelog](https://npm.io/package/generate-changelog.md) ^1.8.0
- [esbuild-plugin-sass](https://npm.io/package/esbuild-plugin-sass.md) ^1.0.1
- [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) ^7.21.3
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.27.5
- [eslint-config-airbnb-base](https://npm.io/package/eslint-config-airbnb-base.md) ^15.0.0

## Recent versions

- 1.0.0 (latest) — 2023-03-30

## README

# Tareas de esbuild comunes para proyectos


## Instalación en un proyecto

```
npm i --save-dev -E @roi/esbuild-tasks
```
## Añadir los proyectos en el package.json

```js
{
  "name": "[nombre del proyecto]", //nombre de la carpeta del proyecto (sin espacios el mismo string de la carpeta)
  "version": "1.0.0",
  "description": "módulos web en proyectos",
  "main": "",
  "scripts": {
    "uglify": "npm run build --type=js",
    "styles": "npm run build --type=css",
    "build": "node esbuild.config.js",
    "test": "test"
  },
  "author": "roiback",
  "license": "MIT",
  "devDependencies": {
    "@roi/esbuild-tasks": "1.0.0"
  }
}
```

## Uso en el Gruntfile del proyecto

```js
'use strict';
const path = require('path');
const esbuild = require('@roi/grunt-tasks');

const PATH_DYNAMIC_TEMPLATES = process.env.ROIBACK_DYNAMIC_TEMPLATES;

// JSON
const packageJson = esbuild.file.readJSON('package.json');
const projectJson = esbuild.file.readJSON('project.json');
const templatesJson = esbuild.file.require('templates.json');

const projectConfiguration = require(esbuild)({
    project: packageJson.name,
    projectpath: path.resolve(__dirname),
    apps: Object.keys(projectJson.domains),
    dynamicTemplates: PATH_DYNAMIC_TEMPLATES,
    templates: templatesJson.proyectos
});

const config = [].concat(projectConfiguration);

module.exports = config;

```

## Disparar la tarea

Para lanzar las tareas de compilación:

```
>>> make run-scripts-web <code_project_repo>

>>> make run-scripts-web-styles <code_project_repo>
>>> make run-scripts-web-uglify <code_project_repo>

>>> make run-scripts-web-style <code_project_repo> args="--project=corporativa"
>>> make run-scripts-web-uglify <code_project_repo> args="--project=corporativa"

>>> make run-scripts-web-style <code_project_repo> args="--project=corporativa --page=home"
>>> make run-scripts-web-uglify <code_project_repo> args="--project=corporativa --page=home"
```

## Compilar JavaScript por página ##

Tenemos la posiblidad de definir el archivo [staticfiles.json](https://git.roiback.com/statics/roi-esbuild-tasks/blob/master/staticfiles.json) por proyecto, y podremos definir y personalizar los archivos json que se cargarán en cada proyecto.

Tendremos disponibles dos prefijos que nos ayudarán a completar las rutas:
```sh
(dt) => $HOME/roi/libs/dynamic_templates
(project) => $HOME/roi/webs/<project>
```

## Compilar JavaScript por página ##
** Ejemplo estructura archivo staticfiles.json**

```json
{
    "<code_project>": {
        "generic": [
            "(dt)/src/modules/cookies/andromeda/index.js",
            "(dt)/src/utils/lazy.js",
            "(dt)/src/submodules/dropdown/ara/default.js",
            "(dt)/src/submodules/navbar/andromeda/andromeda.js",
            "(project)/src/js/navigator/andromeda.js",
            "(project)/src/js/main_corporativa.js"
        ],
        "home": [
            "(dt)/src/utils/splide_carousel.js",
            "(dt)/src/modules/popup_footer/antlia/index.js"
        ],
        ...
    ...
}
```

* Con los archivos (rutas) que tenemos en 'generic' se nos va a generar el javascript principal, por ejemplo: 'corporativa2.min.js'
* Con los archivos (rutas) que tenemos en home, por ejemplo, se creará un archivo 'corporativa2-home.min.js', este es la suma
de lo que tenemos en generic + lo que tenemos en home, así no repetimos los mismos archivos en cada página.


* Cuando varios webs del mismo proyecto son replicas podemos simplificar staticfiles añadiendo $refs a un proyecto base. Ejemplo:

```json
{
    "<code_project>": {
        "generic": [
            "(dt)/src/modules/cookies/andromeda/index.js",
            "(dt)/src/utils/lazy.js",
            "(dt)/src/submodules/dropdown/ara/default.js",
            "(dt)/src/submodules/navbar/andromeda/andromeda.js",
            "(project)/src/js/navigator/andromeda.js",
            "(project)/src/js/main_corporativa.js"
        ],
        "home": [
            "(dt)/src/utils/splide_carousel.js",
            "(dt)/src/modules/popup_footer/antlia/index.js"
        ],
        ...
    },
    "<code_project2>": {"$ref": "#<code_project>"},
    "<code_project3>": {"$ref": "#<code_project>"}
}
```

## Compilar estilos por página ##

Para ello habría que añadir al `templates.json` en cada página la clave `style` con el nombre del `.scss` de cada código de página, localizados en `src/styles/{{ codigo.proyecto }}`:
```json
"home": {
    "contextos": "",
    "extends": "",
    "modulos": [
        ...
    ],
    "styles": "home.scss",
    ...
}
```

* Cuando varios webs del mismo proyecto son replicas podemos simplificar el templates.json añadiendo $refs a un proyecto base. Ejemplo:

```json
{
    "proyectos": {
        "definitions":{
            "corporate": {
                "home": {
                    "contextos": "",
                    "extends": null,
                    "modulos": [],
                    "styles": "home.scss",
                    ...
                }
                ...

        },
        "corporativa2": {"$ref": "#/definitions/corporate"},
        "desire2":      {"$ref": "#/definitions/corporate"}
    }
}
```

## Contributing ##

For contributing please make a merge request


### Publish the release of a package ###

Release a new version of the package:

```
npm release:patch
```
or

```
npm release:minor
```
or

```
npm release:major
```

---
_Source: https://npm.io/package/roi-esbuild-tasks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._