@netcentric/fe-build

Frontend build tools for AEM projects.

Abstract

All-in-one solution for modern Frontend projects, with special focus on Adobe Experience Manager development (AEM). It compiles your Scss and JS source files and creates the appropriate clientLibs to be included by AEM.

Getting started

Use npm to install fe-build:

npm i @netcentric/fe-build

Add the nc-fe-build task in the scripts section of your package.json file:

  "scripts": {
    "build": "nc-fe-build"
  },

Create a directory named src and put some Scss and JS files there named ".source.scss" and ".source.js".

Create a file named .febuild file one level up from where the source code directory is with the following content:

module.exports = {}

Finally, run the build task:

npm run build

Features

JavaScript

• Lint source code with ESLint.
• Transpilation with Babel.
• core-js polyfills are automatically added when needed.
• Bundled and optimized with Webpack.
• Analyze bundles with Webpack Bundle Analyzer.

CSS

• Lint source code with Stylelint.
• SASS compilation.
• Add vendor prefixes with Autoprefixer.

ClientLibraries

• Automatically create clientLibrary resources based on the source files.
• Include all generated CSS and JS files in the css.txt and js.txt files.

Guides

• Configuration
• Recommended NPM Tasks
• Quick Start
• Migrating to v4.0.0
• Contributing