roi-esbuild-tasks v1.0.0

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

{
  "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

'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 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:

(dt) => $HOME/roi/libs/dynamic_templates
(project) => $HOME/roi/webs/<project>

Compilar JavaScript por página

Ejemplo estructura archivo staticfiles.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:

{
    "<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 }}:

"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:

{
    "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