ECL Builder
Configuration
By default, ecl-builder will read the ecl-builder.config.js
file at the root
of your project. You can use the -c
or --config
parameter if you want to
give your configuration file another name.
Typically, this is what it should look like:
const path = require('path');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
scripts: [
{
entry: path.resolve(__dirname, 'src/entry.js'),
dest: path.resolve(__dirname, 'dist/output.js'),
options: {
sourceMap: isProd ? false : 'inline',
moduleName: 'myModule',
},
},
],
styles: [
{
entry: path.resolve(__dirname, 'src/entry.scss'),
dest: path.resolve(__dirname, 'dist/output.css'),
options: {
sourceMap: isProd ? 'file' : true,
},
},
],
copy: [
{
from: path.resolve(__dirname, 'src/fonts'),
to: path.resolve(__dirname, 'dist/fonts'),
},
{
from: path.resolve(__dirname, 'src/images'),
to: path.resolve(__dirname, 'dist/images'),
},
],
};
Watch mode
ECL builder provides a thin wrapper on top of browsersync for facilitating development workflows with the assets mentioned above.
Example configuration:
{
init: {
proxy: `${app.host}:${app.port}`,
},
handlers: [
{
pattern: `./(dev|ec-core)/src/*.scss`,
events: [
{
on: 'change',
name: 'dev/ec-core presets scss changes',
command: 'npm run build:styles',
message: 'New styles ready',
reload: '*.css',
},
],
},
]
}
The object passed to init
is merged with the same method from browsersync. ECL uses the proxy
option for it's storybook instances, but this could be any other application such as a Drupal website.
handlers
define a list of event handlers spawning .watch()
tasks.
The value for on
property matches the chokidar's events.
reload
is the same as browsersync's reload()
. It's optional and could be most useful in handlers related to changes in styles (scss/css) which can be injected on the page without full page reload with reload("*.css")
. In all other cases, passing the function with empty parameters will cause a full page reload.