Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@goldencomm/build-scripts

0.9.8-3 • Public • Published

GoldenComm's Build Scripts Module

This package contains a series of tools for processing theme assets using WebPack and the GC CLI

Installation

$ npm i -D @goldencomm/build-scripts

Quick References

Supported Platforms

The build tools in this package are designed to work with GoldenComm's starter themes for the following platforms:

  • WordPress
  • Kentico
  • NopCommerce

Options Configuration

You can specify a few options for your local theme in the ./build/options.json file. You can use the gc copy build command to insert the boilerplate options.json file into your theme. The options you configure in your local theme will override the default configuration in the module for the WebPack build arguments.

Supported Options

JSON Name Type Default Value Description
src.styles String ./src/styles The directory where your theme.scss file resides. Relative to your theme's root directory
src.scripts String ./src/scripts The directory where your theme.js file resides. Relative to your theme's root directory
src.images String ./src/images The directory where your image files reside. Relative to your theme's root directory
output String ./assets The directory where WebPack will output all of the processed assets. Relative to your theme's root directory
externals Object {"jquery": "jQuery"} The externals config object for WebPack
copy Array src images, src fonts, jquery.min.js, & font awesome webfonts The array passed to the Copy WebPack Plugin
localWebPack String|Boolean default Tells this module how to handle the local theme's WebPack config file, if one exists. If set to merge, this module will attempt to "merge" the theme's local config with the module's config. If set to true, only the theme's config will be used. If set to false, the theme's config will be ignored. If set to "default", this module will prompt the user for a response on how to handle the theme's config.

Theme Overrides

You can include a number of files in your theme's directory to override the default files in this module. To quickly add any of those files to your theme, use the gc copy command from the GC CLI.

Supported Files

Filename Location Description
babel.config.js ./ The configuration file for the Babel Transpiler, which is used by the Babel WebPack loader.
postcss.config.js ./ The configuration file for PostCSS transformer tool, which is used by the PostCSS WebPack loader
manifest.json ./build/ The base manifest.json file that is processed by WebPack and output in your theme's main assets directory. This is required for PWA support, and is general best practice to include in production.
offline.html ./build/ The html file that is returned by the PWA's service worker when the user is in offline mode
sw.js ./build/ The Service Worker file that is registered for Progressive Web App support.

Local WebPack

If the Options Config doesn't provide enough customization for your theme's WebPack process, you can include a webpack.config.js file in your theme's root directory.

Merge Strategy

The best way to handle this feature is to use the "merge" strategy by returning only the additional configuration options needed. For instance, if your project is using VueJS and you want your JavaScript to be handled by the Vue WebPack loader, then your webpack.config.js file could look like this:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

The merge strategy also supports the webpack.config.js file returning a function instead of the configuration object. Using the VueJS example, that might look like this:

module.exports = (env, argv) => {
  if (env.build === 'theme') {
    // Only include the Vue Loader if we're building the theme.js file  
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    return {
      module: {
          rules: [
            {
              test: /\.vue$/,
              loader: 'vue-loader'
            }
          ]
        },
        plugins: [
          new VueLoaderPlugin()
        ]
    };
  }
  return {};
};

Override Strategy

If you'd like to completely override the WebPack configuration used in this module, you can write your own WebPack config in your theme's webpack.config.js file and use the "localWebPack" property in the Options Config to tell this module to only refer to your theme's config file.

Troubleshooting

No CSS file

Reason - The default WebPack config in this module doesn't set the main SCSS file as an entry point like older GC WebPack configs.

Solution - You'll need to require your main stylesheet in your main JavaScript file. This applies to both theme & admin files.

// theme.js
require('../styles/theme.scss');

Keywords

Install

npm i @goldencomm/[email protected]

Version

0.9.8-3

License

MIT

Unpacked Size

142 kB

Total Files

25

Last publish

Collaborators

  • avatar