web-component-build

Build toolchain for BYU Web Components.

This toolchain bundles together components into a single js file using webpack, transpiles to ES5, minfies, and generates a file that loads the appropriate bundle and polyfills.

Currently, gulp is the only build tool supported.

Installation

npm install --save-dev byu-web-component-build

Usage

Gulp.js

Once initialized, the build will add a wc:build task to gulp, which will invoke a series of smaller tasks to build the components.

Example Gulpfile:

const initWcBuild = require('byu-web-component-build').gulp;

initWcBuild(gulp, {
    componentName: 'my-component-name',
    js: {
        input: './my-component/script.js'
    },
    css: {
        input: './css/site.scss'
    }
});

gulp.task('build', ['wc:build']);

Options

Name | required | default | description -----|----------|---------|------------ componentName | Y | | The name of the component. outputDirectory | N | 'dist' | Directory in which to output files js | Y | | Javascript options js.input | Y | | Javascript input file js.output | N | | js.output.loader | N | componentName + '.js' | Loader file output js.output.bundle | N | 'components.js' | Main bundle file js.output.compatBundle | N | 'components-compat.js' | Backwards-compatibile (ES5) bundle file webpackConfig | N | Default Config | Overrides the webpack configuration