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 = {
  // Compile entry.js
  scripts: [
    {
      entry: path.resolve(__dirname, 'src/entry.js'),
      dest: path.resolve(__dirname, 'dist/output.js'),
      options: {
        sourceMap: isProd ? false : 'inline',
        moduleName: 'myModule',
      },
    },
  ],
  // Compile entry.scss
  styles: [
    {
      entry: path.resolve(__dirname, 'src/entry.scss'),
      dest: path.resolve(__dirname, 'dist/output.css'),
      options: {
        sourceMap: isProd ? 'file' : true,
        minify: true,
      },
    },
  ],
  // Copy files from src to dest
  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.