OrionBP is a simple front-end boilerplate for projects using OrionCSS and OrionJS. It includes a suite of useful Gulp tasks allowing you to compile, compress and concatenate your SASS, JS and image assets.
OrionBP uses Gulp as its build system. If you've never used Gulp before, you need to first install its client using NPM:-
npm install --global gulp-cli
Finally, run the below command:-
- Generates all required OrionCSS directories in your dev directory.
- Adds an OrionCSS compatible
main.scssto your SASS dev directory, though if you've modified the default SASS directory structure you may then need to edit the
@importpaths to correctly point to
- Adds a sample SASS component
06 - componentsdirectory.
- Creates your JS directory and adds a
main.jsstarter file with OrionJS imports.
gulpfile.js you can configure various options to tweak the behaviour of gulp tasks.
minify - if
true then CSS & JS will be minified once compiled and will have a .min suffix before the file extension. For example
lint - If
true then SASS will be linted by stylelint to enforce style guidelines. These rules can be tweaked in
You can also configure the paths used by Gulp to align with your project's directory structure. By default, these paths are:-
// Development root const dev = "dev"; // Distribution root const dist = "dist"; // HTML directories const htmlDev = "dev/html"; const htmlDist = dist; // Image directories const imgDev = "dev/img"; const imgDist = "dist/img"; // SASS directories const sassDev = "dev/sass"; const sassDist = "dist/css"; // JS directories const jsDev = "dev/js"; const jsDist = "dist/js";
A breakdown of the production Gulp tasks included with OrionBP can be found below:-
gulp build generates a freshly compiled build of your project in your chosen distribution directory (default:
During a build, the following happens:-
- Any existing builds are deleted
- HTML is copied from its development directory (default:
dev/html) to its dist directory (default:
- OrionBP supports nunjucks, so if any relevant syntax is found its also compiled
PHP / SQL
- PHP is left intact; copied with its directory structure from dev directory to the dist directory
- SASS is compiled and minified (if
- It is then autoprefixed using autoprefixer
- It is then linted for errors using stylelint (if
- A source map is generated using gulp-sourcemaps and appended to the minified CSS
- Unused CSS classes are removed using UNCSS
- A compiled CSS file is created in the sass dist directory (default:
- Gulp looks for files in the root development JS directory (default:
- Browerify grabs all dependencies and bundles everthing together into one file
- The bundle is minified (If
- It's deposited in the js dist directory (default:
- Any miscellaneous files with a xml, txt or json file extention found in the dev directory are copied with their directory structure intact to the dist directory
- If a
fontsdirectory is found in the dev directory, it's copied to the dist directory with its contents
- If a
.htaccessfile is found in the dev directory, it's copied to the dist directory
- Bitmap images are copied to the image dist directory (default:
dist/images) and optimised using imagemin
- SVG images are concatenated into one and embed directly in the HTML as an icon system. More info
gulp watch watches for any file changes and if detected runs a relevant gulp task. For example if
gulp watch is active and any
.scss files change, a SASS task will then automatically run to compile the changes.
Note - The SASS watch task doesn't run UNCSS. This is simply to speed it up a little as UNCSS is quite a taxing process when there are many pages to process.
gulp sass-debug- Generates a non-minified build of your SASS.
gulp sass-build-debug- The same as above, but also runs UNCSS and lint (if