@goldencomm/build-scripts
A collection of WebPack build scripts developed by and for GoldenComm
Last updated 7 months ago by mrasmuscomm .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @goldencomm/build-scripts 
SYNC missed versions from official npm registry.

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
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.
localDev Object {"host": "localhost","port": "3000", "sync", true} These settings are used by the gc dev command (currently supported in the NopCommerce platform). The sync option determines whether or not to include the Browser Sync Plugin for hot-reloading. The other options are passed as the Browser Sync options to the plugin.

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.

Dev Command

The following platforms are currently supporting the gc dev command:

NopCommerce Dev Details

Running the gc dev command will attempt to use the dotnet watch run command to spin up a local dev server on your machine and it will use the Browser Sync Webpack Plugin to watch for changes in the theme files and reload the browser automatically. The process defaults to "localhost:55390" and "**/.cshtml, **/.css, **/*.js" for the Browser Sync's options proxy and files, respectively. You can change those in your local Build Options file in the "localDev" object. You can remove the Browser Sync plugin from the Webpack configuration by passing the --nosync flag to the gc dev command or by setting the localDev.sync propery in the Build Options file to false;

The process will check the installed Dotnet Core SDKs on your machine to make sure the command will run properly. You can download the proper Dotnet Core SDK from Microsoft's website.

The process will also help you set up a database connection, if it detects that one hasn't been set up yet. You can use the gc dev connect command to add/update a database connection string, or to change to another connection string. If you know the name of the connection string you want to update/swap to, you can use the gc dev connect {CONNECTION_NAME} syntax.

If the plugin or core project code has been updated and you need to recompile the project, you can add the "build" flag to the command (ie gc dev --build);

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');

Current Tags

  • 1.0.3                                ...           latest (2 months ago)

21 Versions

  • 1.0.3                                ...           2 months ago
  • 1.0.2                                ...           2 months ago
  • 1.0.1                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
  • 0.9.9                                ...           6 months ago
  • 0.9.8-7                                ...           6 months ago
  • 0.9.8-6                                ...           6 months ago
  • 0.9.8-5                                ...           6 months ago
  • 0.9.8-4                                ...           6 months ago
  • 0.9.8-3                                ...           6 months ago
  • 0.9.8-2                                ...           6 months ago
  • 0.9.8-1                                ...           6 months ago
  • 0.9.8                                ...           6 months ago
  • 0.9.7                                ...           6 months ago
  • 0.9.6                                ...           6 months ago
  • 0.9.5                                ...           6 months ago
  • 0.9.4                                ...           6 months ago
  • 0.9.3                                ...           7 months ago
  • 0.9.2                                ...           7 months ago
  • 0.9.1                                ...           7 months ago
  • 0.9.0                                ...           7 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |