AEM Actualizar proyecto de de pila completa para utilizar canalización front-end update-project-enable-frontend-pipeline

Quitar el módulo ui.frontend del ciclo de compilación de pila completa

• En, la raíz pom.xml del proyecto de WKND Sites comenta la entrada del submódulo <module>ui.frontend</module>.

    ...
    <modules>
    <module>all</module>
    <module>core</module>
    <!--
    <module>ui.frontend</module>
    -->
    <module>ui.apps</module>
    ...

• Y dependencia relacionada con los comentarios de ui.apps/pom.xml

    ...
    <!-- ====================================================================== -->
    <!-- D E P E N D E N C I E S                                                -->
    <!-- ====================================================================== -->
        ...
    <!--
        <dependency>
            <groupId>com.adobe.aem.guides</groupId>
            <artifactId>aem-guides-wknd.ui.frontend</artifactId>
            <version>${project.version}</version>
            <type>zip</type>
        </dependency>
    -->
    ...

Prepare el módulo ui.frontend para el contrato de canalización front-end agregando dos nuevos archivos de configuración de Webpack.

• Copie el(la) webpack.common.js existente(a) como webpack.theme.common.js, y cambie la propiedad output y los parámetros de configuración del complemento MiniCssExtractPlugin, CopyWebpackPlugin de la siguiente manera:

...
output: {
        filename: 'theme/js/[name].js',
        path: path.resolve(__dirname, 'dist')
    }
...

...
    new MiniCssExtractPlugin({
            filename: 'theme/[name].css'
        }),
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './clientlib-site' }
        ]
    })
...

• Copie la webpack.prod.js existente como webpack.theme.prod.js y cambie la ubicación de la variable common al archivo anterior como

...
    const common = require('./webpack.theme.common.js');
...

• En el archivo package.json, asegúrese de que el valor de la propiedad name sea el mismo que el nombre de sitio del nodo /conf. Y en la propiedad scripts, un script build que indica cómo generar los archivos front-end a partir de este módulo.

    {
    "name": "wknd",
    "version": "1.0.0",
    ...

    "scripts": {
        "build": "webpack --config ./webpack.theme.prod.js"
    }

    ...
    }

Prepare el módulo ui.content para la canalización front-end agregando dos configuraciones de Sling.

• Crear un archivo en com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig: esto incluye todos los archivos front-end que el módulo ui.frontend genera en la carpeta dist mediante el proceso de generación de Webpack.

...
    <css
    jcr:primaryType="nt:unstructured"
    element="link"
    location="header">
    <attributes
        jcr:primaryType="nt:unstructured">
        <as
            jcr:primaryType="nt:unstructured"
            name="as"
            value="style"/>
        <href
            jcr:primaryType="nt:unstructured"
            name="href"
            value="/theme/site.css"/>
...

• Segundo, com.adobe.aem.wcm.site.manager.config.SiteConfig con el valor themePackageName que es el mismo que el valor de propiedad package.json y name, y siteTemplatePath que señala a un valor de ruta de acceso auxiliar /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0.

...
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
            jcr:primaryType="nt:unstructured"
            siteTemplatePath="/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0"
            themePackageName="wknd">
    </jcr:root>
...

Se ha cambiado un tema o estilos para implementarlos a través de la canalización front-end para una ejecución de prueba. Estamos cambiando text-color a rojo Adobe (o puede elegir el suyo propio) al actualizar ui.frontend/src/main/webpack/base/sass/_variables.scss.

    $black:     #a40606;
    ...