Frame Build Package

A frontend build system for Frame Creative sites. This project wraps up a gulp + webpack build process into a single reusable package with flexible congifuration options and ability to override or customise to your project.

Will work with 90% of Frame's WordPress projects out of the box, only minor config changes needed if theme dirs are named different to our conventions. Will also work with just about anything - we've used it successfully with Shopify themes, CraftCMS sites, static websites etc.

Tasks

The package defines a number of internal tasks, and exposes two public gulp tasks.

Styles

Transforms SCSS files into CSS and runs it through autoprefixer and a minifier. As PostCSS is used for autoprefixer, it's pretty easy to get it doing other PostCSS processing if necessary.

Supports glob includes in SCSS - ie: @import 'tools/**

Since V2 dart-sass is in use - this may throw warnings round syntax that has been deprecated, especially to do with math functions.

Scripts

JS transpile task using webpack. Supports ES6, JSX and Vue templates out the box. Runs uglify on production builds.

SVG / Icons

Takes any svg file in the icons directory and combines them into an SVG sprite. We typically load this sprite async using JS and then insert it into the DOM to allow <use> for referencing SVGs.

Modernizr

Optional task to build a modernizr bundle.

V2.2 Notes

• SVG min task removed from the Dupe function, as it's causing issues with watch

v 2.1 Notes

• Added an examples folder with some sample gulp files to help get up and running.
• Export out individual task (scripts, styles, icons ) with custom clean functions to enable them to be run seprately if needed.
• Removed gulp-util to remove unecessary dependencies and warnings (we were barely using it).

Recommend downgrading svgo to version below, as gulp-svgmin is some time away from implementing options that can be passed in to svgo >=2.4

It's highly recommended you add the following to your project's package.json

These resolutions are required to use Frame Buil on an Apple Silicon based mac.

  "resolutions": {
    "chokidar": "^3.5.2",
    "svgo": "2.3.1"
  },

V2.0 Notes

It's highly recommended you add the following to your project's package.json

  "resolutions": {
    "chokidar": "^3.5.2",
    "svgo": "2.3.1"
  },

Other notes

• Node version 14 and above is required.
• MergeStream swapped for merge2
• Moved to Gulp 4
• SVGMin config is now editable per-project via set options

Config

The default config is

let config = {
    themePaths : [],
    assetDir : 'assets',
    builtDir : 'built',
    scriptsDir : 'scripts',
    stylesDir : 'styles',
    iconsDir : 'icons',
    isProduction : isProduction,
    webpack : require('./webpack.config.js'),
    versions : isProduction,
    flatten : false,
    modernizr : false,
    debug : false,
    svgMin: svgMinOpts
};

You can set the config within a project using Frame Build, by calling setOptions()

const frameBuild = require('frame-build');

// Example of setting options via a simple object
frameBuild.setOptions({
    themePaths : [
        'site/content/themes/poderma'
    ],
    browsersyncUrl : proxyUrl
});

// Example of setting via a callback function

frameBuild.setOptions( (options) => {

  if ( ! process.env.NODE_ENV === 'staging' ) return options;

  options.versions = true;

  return options;

});