ECL Builder / Respect filepath patterns

README.md

Intro

The adjustemt mentioned here improve the build process of the .scss files in the oe_theme/blellow. Instead of an explecitly list, filepath patterns can be used.

Installation

npm i glob --save
npm i glob-base --save

Replace the files that follow with the adjust version attached

1. node_modules/@ecl/builder/bin/build.js
2. Replace the style array in the web/themes/contrib/blellow/ecl-builder.config.jswith the snippet attached.

build.js

#!/usr/bin/env node

const path = require('path');
const program = require('commander');
const buildScript = require('../scripts/scripts');
const buildStyles = require('../scripts/styles');
const copyFiles = require('../scripts/copy');
const pkg = require('../package.json');
const glob = require('glob');
const globBase = require('glob-base');

const loadConfig = configFile => {
  const conf = configFile || 'ecl-builder.config.js';
  return require(path.resolve(process.cwd(), conf)); // eslint-disable-line
};

const target = function(source, globBase, dest) {
  const SOURCE_EXT = '.scss';
  const TARGET_EXT = '.css';

  // If there is no glob path detected return the destination.
  if (!globBase.isGlob) { return dest; }
  
  source = source.replace(globBase.base, dest);
  source = source.replace(SOURCE_EXT, TARGET_EXT);
  return source;
}

const resolveAndBuildStyles = function(conf) {
  const gb = globBase(conf.entry);

  glob(conf.entry, {}, function (er, files) {
    files = files.filter(file => {
      const basename = path.basename(file);
      return !basename.startsWith('_');
    }).forEach(file => {
      const dest = target(file, gb, conf.dest);
      buildStyles(file, dest, conf.options)
    })
  });
}

program
  .version(pkg.version)
  .usage('ecl-builder [command] [option]')
  .option(
    '-c, --config [config_file]',
    'config file (default: ecl-builder.config.js)'
  );

program
  .command('scripts')
  .description('compile JS')
  .action(() => {
    const config = loadConfig(program.config);
    config.scripts.forEach(conf =>
      buildScript(conf.entry, conf.dest, conf.options)
    );
  });

program
  .command('styles')
  .description('compile SCSS to CSS')
  .action(() => {
    const config = loadConfig(program.config);
    config.styles.forEach(conf => {
      resolveAndBuildStyles(conf);
    });
  });

program
  .command('copy')
  .description('copy static files')
  .action(() => {
    const config = loadConfig(program.config);
    config.copy.forEach(conf =>
      copyFiles(conf.patterns || '**', conf.from, conf.to)
    );
  });

// If no arguments provided, display help menu.
if (!process.argv.slice(2).length) {
  program.help();
} else {
  program.parse(process.argv);
}

ec-builder-config--snippet.js

styles: [
    // {
    //   entry: path.resolve(__dirname, 'sass/style.scss'),
    //   dest: path.resolve(outputFolder, 'css/style.css'),
    //   options: {
    //     banner,
    //     includePaths,
    //     sourceMap: isProd ? 'file' : true,
    //   },
    // },
    // {
    //   entry: path.resolve(__dirname, 'sass/components/login-register.scss'),
    //   dest: path.resolve(outputFolder, 'css/components/login-register.css'),
    //   options: {
    //     banner,
    //     includePaths,
    //     sourceMap: isProd ? 'file' : true,
    //   },
    // },
    {
      entry: path.resolve(__dirname, 'sass/**/*.scss'),
      dest: path.resolve(outputFolder, 'css'),
      options: {
        banner,
        includePaths,
        sourceMap: isProd ? 'file' : true,
      },
    }
  ],