You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
All in one solution for modern Frontend projects, with special focus on AEM (Adobe Experience Manager)
13
-
14
-
## Installation
11
+
## Abstract
12
+
All-in-one solution for modern Frontend projects, with special focus on [Adobe Experience Manager](https://business.adobe.com/products/experience-manager/adobe-experience-manager.html) development (AEM). It compiles your SCSS and JS source files and creates the appropriate [clientLibs](https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en) to be included by AEM.
15
13
14
+
## Getting started
15
+
Use [npm](https://docs.npmjs.com/about-npm/) to install fe-build:
16
16
```
17
17
npm i @netcentric/fe-build
18
18
```
19
19
20
20
## Usage
21
-
1.1. Add `nc-fe-build` task in package.json scripts
21
+
Add `nc-fe-build` task in the scripts section of your package.json file:
22
22
```
23
23
"scripts": {
24
24
"build": "nc-fe-build"
25
25
},
26
26
```
27
-
1.2. Run npm task
27
+
Run the npm task:
28
28
```
29
-
npm run build
29
+
npm run build
30
30
```
31
31
32
+
## Features
32
33
### JavaScript
33
34
34
-
1. Lint sourcecode with Eslint
35
-
2. Transpile with Babel
36
-
3. Bundle and optimize with Webpack
37
-
4. Analyze bundles with webpack-bundle-analyzer
35
+
- Lint source code with [ESLint](https://eslint.org/).
36
+
- Transpilation with [Babel](https://babeljs.io/).
37
+
- Bundled and optimized with [Webpack](https://webpack.js.org/).
38
+
- Analyze bundles with [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer).
38
39
39
40
### CSS
40
41
41
-
1. Lint sourcecode with Stylelint
42
-
2. Compile with sass (ex dart-sass)
43
-
3. Transform with Autoprefixer
42
+
- Lint source code with [Stylelint](https://stylelint.io/).
43
+
-[SASS](https://sass-lang.com/) compilation.
44
+
- Add vendor prefixes with [Autoprefixer](https://github.com/postcss/autoprefixer).
44
45
45
46
### ClientLibraries
46
47
47
-
1. Automatically create clientLibrary based on source file
48
-
2. Include all bundled files
48
+
1. Automatically create [clientLibrary resources](https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en)based on the source files.
49
+
2. Include all generated CSS and JS files in the css.txt and js.txt files.
49
50
50
-
## Configuration file
51
+
## Configuration
51
52
52
-
Default configuration can be extended via `.febuild` file.
53
-
Config file is loaded and executed as JavaScript module.
54
-
Custom configuration is used for all files located in the same directory as `.febuild`
55
-
and in subdirectory tree.
53
+
The default configuration can be extended via a `.febuild` file.
54
+
This configuration file is loaded and executed as a JavaScript module.
55
+
It is used for all files located in the same directory as the `.febuild` file and in the subdirectory tree.
56
56
57
-
Add `.febuild` whenever you need group of files to use separate build options.
57
+
You can add multiple `.febuild` whenever you need to run a separate build with other options.
58
58
59
-
Configuration that can be extended:
59
+
These are the configurations that can be extended:
60
60
- general
61
61
- output
62
62
- resolve
@@ -70,7 +70,7 @@ Configuration that can be extended:
70
70
- templates
71
71
- clientlibs
72
72
73
-
Eg, to override default babel config:
73
+
E.g., to override the default Babel configuration:
Check default settings for specific parts in: [CONFIG](./docs/configuration.md)
96
-
97
-
First config that you need to adapt are probably Source and Bundle paths.
98
-
Default values are `src` and `dist` directories. I f you have different structure, override this values in `.febuild` file.
99
-
Default source file suffix is `*.souorce.*`
94
+
The first configurations that you need to adapt are probably the source and destination paths.
95
+
The default paths are `src` for the source path and `dist` for the destination path. If you have a different structure, you can override these values in your `.febuild` file.
100
96
101
-
eg. Your project
97
+
e.g. In your project:
102
98
103
99
```
104
-
--package.json
105
-
--projectSrcDir
100
+
--package.json
101
+
--projectSrcDir
106
102
|-- component
107
-
|--file.scss
103
+
|--file.scss
108
104
```
109
105
110
-
On first run of NPM build task, no files will be processed, because there is no match with default settings.
106
+
Note that on the first run of the npm build task, no files will be processed, because no file matches with default settings.
107
+
108
+
To start the build and update the default settings, add a `.febuild` file in your `projectSrcDir` directory with no configuration.
109
+
```
110
+
module.exports = {}
111
+
```
111
112
112
-
To update default settings add `.febuild` file in your `projectSrcDir` dir.
113
+
You can check the default settings for each specific section in [CONFIG](./docs/configuration.md).
113
114
114
-
### Custom source dir
115
+
### Custom source path
115
116
116
-
Two updates are needed:
117
-
1. Add `source` suffix to all files that needs to be processed
118
-
-`file.scss` --> `file.source.scss`
119
-
2. Change source dir to `projectSrcDir`, in `.febuild`
117
+
In order to start processing your files, two updates are needed:
118
+
1. Add the `source` suffix to all the files that needs to be processed. This suffix value is defined in `general.sourceKey`.
119
+
`file.scss` --> `file.source.scss`
120
+
2. Change the source directory to `projectSrcDir` in the `.febuild`file.
120
121
```
121
122
module.exports = {
122
123
general: {
123
-
sourcesPath: 'path/to/projectSrcDir',
124
+
sourcesPath: './projectSrcDir',
124
125
}
125
126
}
126
127
```
127
-
- if sourcePath is not provided, path to `.febuild` will be used. For this simple example, this is enough.
128
-
```
129
-
module.exports = {}
130
-
```
128
+
if `sourcePath` is not provided, the path to `.febuild` file will be used instead. For this simple example, that is enough.
131
129
132
-
After running build task:
130
+
After running again the npm build task, this will be the output the destination folder:
133
131
```
134
-
--package.json
135
-
--projectSrcDir
132
+
-- package.json
133
+
-- .febuild
134
+
-- projectSrcDir
136
135
|-- component
137
-
|--file.source.scss
138
-
--dist
136
+
|--file.source.scss
137
+
--dist
139
138
|-- component
140
-
|--file.bundle.scss
139
+
|--file.bundle.scss
141
140
```
142
141
143
-
### Custom dist dir
142
+
### Custom destination path
144
143
145
-
Add custom `dist` dir path in `.febuild`
144
+
To add a custom destination path, add to the `.febuild` file the property `general.destinationPath` with the desired path.
0 commit comments