@stylify/bundler
Bundler es un paquete que te permite generar archivos CSS para tu proyecto. Bundler se utiliza internamente dentro de otros paquetes CSS de Stylify.
![](/images/docs/bundler/bundler.png)
Instalación
Bundler sólo se puede instalar a través de CLI como NPM o Yarn:
yarn add -D @stylify/bundler
npm i -D @stylify/bundler
Uso
import { Bundler } from '@stylify/bundler';
const bundler = new Bundler();
bundler.bundle([
{
outputFile: 'path/to/output.css',
files: ['path/to/layout.html', 'path/to/page.vue']
},
{ outputFile: 'path/to/another.css', files: ['path/**/*.html'] }
]);
Configuración
Bundler proporciona varias opciones de configuración:
import { defineConfig } from '@stylify/bundler';
const config = defineConfig({
// Los paquetes son opcionales.
// Pero si no se pasan durante la llamada al método bundle()
// deben pasarse aquí. De lo contrario no se generarán bundles
bundles: [],
// Las opciones son opcionales
// https://stylifycss.com/en/docs/stylify/compiler#configuration
compiler: {},
// Ruta a un archivo de configuración. En modo vigilancia
// nuxt vigila el fichero de configuración por si hay cambios
configFile: 'path/to/config.js',
// Si se activa verbose, se mostrará la información de compilación
verbose: true,
// La compilación está sincronizada por defecto
sync: true,
// Si se establece en true, después de la compilación, bundler comenzará a
// a buscar cambios en los archivos
watchFiles: false,
// Los bundles se pueden definir directamente cuando se crea la instancia
// La configuración del bundle se muestra a continuación en el método bundler.bundle()
// El método bundle() debe ser llamado para iniciar el proceso de bundling
bundles: [],
// Esto configura el orden y la exportación de las capas CSS
cssLayersOrder: {
// Esto generará @layer layout,page;
order: 'layout, page',
// Esto le dice a Stylify que exporte el orden de capas anterior
// sólo en los paquetes, que tiene capa de diseño CSS
exportLayer: ['layout']
},
// Si la ruta del archivo se proporciona en las siguientes opciones
// las variables de la configuración del compilador se exportarán a esos archivos
// para que puedas reutilizarlas dentro de CSS, scss y etc.
// -----------
// Las variables CSS se inyectan por defecto en el CSS generado.
// Puedes cambiar este comportamiento configurando el compilador
// Ver https://stylifycss.com/en/docs/stylify/compiler#variables
cssVarsExportPath: 'path/to/vars',
sassVarsExportPath: 'path/to/export-file.scss',
lessVarsExportPath: 'path/to/vars',
stylusVarsExportPath: 'path/to/vars'
});
const bundler = new Bundler(config);
// Matriz de bundles, devuelve Promise<void>
bundler.bundle([
{
// Requerido
// El archivo de salida se utilizará para almacenar el CSS generado
// de los archivos dados
outputFile: '/path/to/output.css',
// Los archivos o máscaras de archivos se utilizarán para encontrar los archivos
// a partir de los cuales se generará el CSS.
// Internamente Stylify CSS utiliza https://npmjs.com/package/fast-glob
// para encontrar archivos.
files: [
'path/to/file.html',
'path/files/*/*.html',
'path/to/files/**/*.html'
],
// Opcional
// Este id puede ser usado para encontrar bundle por id
id: 'my-bundle-id',
// Cuando es true, los selectores en los archivos dados serán manipulados
// Si esta opción es true y rewriteSelectorsInFiles es false
// sólo se modificarán los selectores CSS
mangleSelectors: false,
// Puede deshabilitar la reescritura de selectores dentro de un archivo cuando sólo desee
// manipular CSS pero no ficheros
rewriteSelectorsInFiles: false,
// Cuando desea generar CSS sólo para una parte específica de la página o no quiere
// romper otro CSS en el proyecto. Bueno para componentes y plugins de código abierto
// como chats y etc.
// Este selector se usa EXACTAMENTE como lo configuras. Así que si usas espacio al final
// el espacio se utilizará en el ámbito.
scope: '#my-scope',
// La configuración del compilador puede ser específica del paquete
// https://stylifycss.com/en/docs/stylify/compiler#configuration
compiler: {},
// Si la capa está configurada, css se envolverá en @capa <nombre> {}
cssLayer: 'page'
}
]);
// En caso de que necesites esperar a que se genere el CSS, llama a este método.
await bundler.waitOnBundlesProcessed();
Ficheros opción contenido
El archivo content options permite configurar opciones directamente en un archivo. Aparte de las opciones de contenido por defecto, puede utilizar la opción files
.
Esta opción espera rutas de archivos como cadena Cuando la ruta del archivo comienza con /
, es una ruta absoluta, de lo contrario es relativa.
stylify-files
/path/to/layout.html
path/to/template/part.html
/stylify-files
Hooks
Bundler extiende default hooks y añade algunos más.
- bundler:initialized: Cuando se crea la instancia de bundler.
- bundler:beforeInputFileRewritten: Antes de reescribir el archivo de entrada
- bundler:beforeCssFileCreated: Antes de crear un archivo CSS
- bundler:bundleProcessed: Cuando se procesa el bundle
- bundler:fileToProcessOpened: Antes de que se procese el archivo
import { hooks } from '@stylify/bundler';
hooks.addListener('hoook:name', (options) => {});
¿Y ahora qué?
- 🚀 Aprende cómo empezar
- ⚙️ O configura Stylify directamente: