README

@netcentric/fe-build

Frontend build tools for AEM projects.

Intro

All in one solution for modern Frontend projects, with special focus on AEM (Adobe Experience Manager)

Installation

npm i @netcentric/fe-build

Usage

1.1. Add nc-fe-build task in package.json scripts

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

1.2. Run npm task

npm run build

JavaScript

Lint sourcecode with Eslint
Transpile with Babel
Bundle and optimize with Webpack
Analyze bundles with webpack-bundle-analyzer

CSS

Lint sourcecode with Stylelint
Compile with sass (ex dart-sass)
Transform with Autoprefixer

ClientLibraries

Automatically create clientLibrary based on source file
Include all bundled files

Configuration file

Default configuration can be extended via .febuild file. Config file is loaded and executed as JavaScript module. Custom configuration is used for all files located in the same directory as .febuild and in subdirectory tree.

Add .febuild whenever you need group of files to use separate build options.

Configuration that can be extended:

general
output
resolve
optimization
plugins
babel
sass
eslint
stylelint
postcss
templates
clientlibs

Eg, to override default babel config: .febuild:

module.exports = {
    babel: {
        exclude: /node_modules\/(?!swiper|dom7)/,
        use: {
            options: {
                plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-transform-runtime', '@babel/plugin-proposal-object-rest-spread']
            }
        }
    }
};

Configuration details: CONFIG

NPM tasks: TASKS

Quick start

Check default settings for specific parts in: CONFIG

First config that you need to adapt are probably Source and Bundle paths. Default values are src and dist directories. I f you have different structure, override this values in .febuild file. Default source file suffix is *.souorce.*

eg. Your project

--package.json
--projectSrcDir
  |-- component
    |--file.scss

On first run of NPM build task, no files will be processed, because there is no match with default settings.

To update default settings add .febuild file in your projectSrcDir dir.

Custom source dir

Two updates are needed:

Add source suffix to all files that needs to be processed - file.scss --> file.source.scss
Change source dir to projectSrcDir, in .febuild
```
module.exports = {
 general: {
   sourcesPath: 'path/to/projectSrcDir',
 }
}
```
- if sourcePath is not provided, path to .febuild will be used. For this simple example, this is enough.
```
module.exports = {}
```

After running build task:

--package.json
--projectSrcDir
  |-- component
    |--file.source.scss
--dist
  |-- component
    |--file.bundle.scss

Custom dist dir

Add custom dist dir path in .febuild

module.exports = {
    general: {
        destinationPath: path.resolve(__dirname, '..', 'custom', 'dist', 'path')
    }
}

Results:

--package.json
--projectSrcDir
  |-- component
    |--file.source.scss
--custom
  |--dist
    |--path
      |-- component
        |--file.bundle.scss

For more customizations, check Configuration details: CONFIG

Usage no npm install needed!