ECL 构建器

配置

默认情况下, ecl-builder 会读取 ecl-builder.config.js 文件位于根 你的项目。 你可以用这个 -c 或者说 --config 如果您想要参数 给您的配置文件另一个名称.

通常,这应该是:

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'),
    },
  ],
};

监视模式

ECL构建器在浏览器同步上提供薄薄的包装,以方便使用上述资产进行开发工作流程.

示例配置 :

{
    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',
          },
        ],
      },
    ]
}

对象传递到 init 合并到同一处 来自浏览器同步的方法. ECL 使用 proxy 但这可能是其他应用程序,如Drupal网站.

handlers 定义事件处理者产卵列表 .watch() 任务。 。 。 .

值为 on 属性匹配 chokidar的事件。 。 。 .

reload 与 浏览器同步 reload()。它是可选的,在与样式变化有关的处理器中可能最有用 reload("*.css")。在所有其他情况下,以空参数传递函数将导致全页重载.