Werk volledig-stapel AEM project bij om front-end pijpleiding te gebruiken update-project-enable-frontend-pipeline

De module ui.frontend verwijderen uit de volledige constructiecyclus voor stapels

• In de hoofdmap van het WKND-siteproject pom.xml vindt u een opmerking over de submodulevermelding van <module>ui.frontend</module> .

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

• En aan opmerkingen gerelateerde afhankelijkheid van 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>
    -->
    ...

Bereid de ui.frontend module voor het front-end pijpleidingscontract door twee nieuwe webpack configuratiedossiers toe te voegen.

• Kopieer de bestaande eigenschappen webpack.common.js as webpack.theme.common.js en change output en MiniCssExtractPlugin , CopyWebpackPlugin plugin config params zoals hieronder:

...
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: './theme' }
        ]
    })
...

• Kopieer de bestaande webpack.prod.js als webpack.theme.prod.js en wijzig als volgt de locatie van de variabele common naar het bovenstaande bestand

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

• Zorg ervoor dat in het bestand package.json de waarde van de eigenschap name gelijk is aan de naam van de site uit het knooppunt /conf . En onder de eigenschap scripts voert u een build -script uit dat aangeeft hoe de front-end bestanden van deze module moeten worden gemaakt.

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

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

    ...
    }

Bereid de ui.content module voor de front-end pijpleiding door twee het Verdraaien vormen toe te voegen.

• Maak een bestand in com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - dit omvat alle front-end bestanden die de module ui.frontend onder de map dist genereert met behulp van het webpack-constructieproces.

...
    <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"/>
...

• Vervolgens wordt de waarde van com.adobe.aem.wcm.site.manager.config.SiteConfig met de waarde van themePackageName gelijk aan de waarde van de eigenschap package.json en name en siteTemplatePath gewijzigd, waarbij wordt verwezen naar de waarde van een /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 stub-pad.

...
    <?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>
...

Als een thema of stijlen worden gewijzigd en via een front-end pijplijn voor een testrun worden geïmplementeerd, veranderen we text-color in Adobe rood (of u kunt uw eigen stijl kiezen) door de ui.frontend/src/main/webpack/base/sass/_variables.scss bij te werken.

    $black:     #a40606;
    ...