frame-build v2.2.5
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;
});
11 months ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago