Skip to content
Biotope Build Framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Build Package for biotope-boilerplate.


  • Typescript + Babel
  • ES6 unglify
  • SCSS
  • Autoprefixer
  • Icon Font
  • SVG Sprite generation
  • HBS for templating
  • ESLint
  • Dev Servers

Options & Settings

All biotope-build options can be set in local /projectConfig.js (<5.x /projectConfig.json)

See default config:

framework internals

global settings

   <String> src: src, //base folder for all the project files, defaults to 'src'
   <String> dev: dev, //temporary folder for all files that get created in the serve/build process, defaults to '.tmp'
   <String> dist: dist, //build folder for the finalized files when running a build process, defaults to 'dist'
   <String> node: node, //node_modules base folder, defaults to 'node_modules'
   <String> cwd: cwd, //process.cwd(), current working dir of node project ###TODO should maybe be private###
   <boolean> isWin: isWin, //checks the os and sets the variable to true if running on a windows system
   <boolean> debug: false, //toggle debbuging prompts from the tasks (static:hb, browserConfig, partialHelper), default is false
   <String> dataObject: 'data' //name of the global data object, which can be used in static handlebars templates via {{data.key}}
   <String> resources: '/resources', //resource folder inside the src folder, needed to run multiple tasks
   <String> components: '/components' //component folder corresponding to the resource folder
   <String> handlebarsHelper: '/js/handlebars.helper.js', //path to dynamic handlebar helpers relative to the resources folder
   <Object> tasks: {}, //see tasks
   <Object> externalResources: {} //see external resources
   <Object> bowerResources: {} //see bower resources

tasks settings

You can toggle certain task in biotope-build. Every Task can be configurated with a boolean.

This list shows the configurable tasks as well as a brief description about what they do.

	browserSupport: true, //creates an overview of the support browser from a *.json file
	cleanCss: true, //minify CSS files for build
	cssStats: true, //checks the maximum selectors in each css file, fails if there are more than 4096 (IE 9 issue)
	favicons: true, //creates and embeds the favicons as well as the mobile icons from an image, default image root is '/resources/'
	handlebars: true, //creates dynamic handlebar templates from hbs files, static page generation is handled in a seperate task
	iconfont: true, //creates the iconfont from svg images, default icon path is '/resources/icons'
	image: true, //compress images stores in '/resources/img'
	linting: true, //linting of js/ts/scss files
	sass: true, //disables the sass compiler, disabled if you use vanilla css
	uglify: true, //uglifies js files in the build
	webpack: true //compiles typescript and transpiles ES6 Code in *.ts files


If you use external resources for the final build you can add those with this object. The module name references the module inside the node_modules folder. The file name needs to be relative to the module.

JS files then get copied to '.tmp/resources/js/vendor/', CSS files to '.tmp/resources/css/vendor/'. When using scss files, reference the node_modules folder directly from there.

	'moduleName': 'singleFile.ext',
	'otherModuleName': ['firstFile.ext', 'folder/secondFile.ext2'],

plugin defaults


Autoprefixer uses the default options, with the last browser versions. Repo:

autoprefixer: {
	browsers: ['last 1 version']


Set the file path to the corresponding *.json file to create a browser support overview.

browserSupport: {
	file: cwd + '/browserSupport.json'


Check dependencies only uses default options. Repo:


Clean CSS uses default options with rebase set to false to prevent rewriting file paths. Repo: Repo:

cleanCss: {
	rebase: false


cssStats exits on error in order to break the build process. Repo:

cssstats: {
	exit: true


Set the port and the folders being watch for connect/livereload. Repo:

connect: {
		port: 9000,
		globs: [
			dev + '/**/*.*',
			src + '/resources/js/**/*.js',
			src + '/resources/bower_components/**/*',
			src + '/_mock/**/*',
			src + '/_config/**/*',
			'!' + dev + '/_mock/**/*',
			'!' + dev + '/_config/**/*',
			'!' + dev + '/_assets/**/*',
			'!' + dev + '/resources/js/vendor/**/*.js',
			'!' + dev + '/resources/css/**/*.map',
			'!' + dev + '/resources/bower_components/**/*',
			'!' + dev + '/resources/js/handlebars.templates.js'


This creates all the favicons and a manifest.json from an image file. Repo:

favicons: {
	appName: "gulp-frontend-boilerplate",
	background: "#020307",
	path: "favicons/",
	display: "standalone",
	orientation: "portrait",
	version: 1.0,
	logging: false,
	online: false,
	html: "htmlhead.favicons.html",
	pipeHTML: true,
	replace: true,
	icons: {
		appleStartup: false


Dynamic handlebar templates and partials get created and added to a namespace. Repo:

handlebars: {
	templateWrap: 'Handlebars.template(<%= contents %>)',
	partialWrap: 'Handlebars.registerPartial(<%= processPartialName(file.relative) %>, Handlebars.template(<%= contents %>));',
	namespace: '',
	noRedeclare: true


Icon font settings are split into gulp-svgicons2svgfont settings and the path settings. Repo:

iconfont: {
	fontName: 'Icons',
	prependUnicode: true,
	timestamp: Math.round( / 1000),
	normalize: true

iconfontCss: [
		fontName: 'Icons',
		path: src + '/resources/scss/fonts/iconfont/_icons.scss',
		targetPath: '../../../../.iconfont/_icons.scss',
		fontPath: '../fonts/icons/',
		cssClass: 'icon'
	}, {
		fontName: 'Icons',
		path: src + '/resources/scss/fonts/iconfont/_iconStyles.scss',
		targetPath: '../../../../.iconfont/_iconStyles.scss',
		fontPath: '../fonts/icons/',
		cssClass: 'icon'


Minifiy the images inside "/resources/img". Repo:

image: {
	verbose: true


Force line-endings to 'LF' formatting to create unification across platform. Repo:

lec: {
	verbose: false,
	eolc: 'LF',
	encoding: 'utf8'


Specifies the port for using livereload. Runs with connect. See connect settings.

livereload: {
	port: 35729


Runs modernizr tests and creates polyfills. Repo: Options:

modernizr: {
	options: [
	excludeTests: [


Sass compiler based on node-sass. Repo: Options:

sass: {
	includePaths: []


Linting of sass files. Default options. Rules need to be defined. Repo:

sassLint: {},


Javascript uglification settings. Repo:

uglify: {
	preserveComments: 'license',
	sourcemaps: false,
	folders: ['js', 'ts'],
	ignoreList: []


Watch task uses polling on windows system, therefore the interval is increased to reduce cpu usage. Repo:

watch: {
	usePolling: isWin,
	interval: (isWin ? 250 : 100)


Add files to an ignoreList, set path relative to src path. Webpack settings are set via webpack.config.js Repo:

webpack: {
	ignoreList: []


There are other tasks in use, but they can not be modified via a projectConfig.js file. If this is needed please open an issue or send a pull request.

Local development

  1. Clone biotope-boilerplate repository
  2. Install locally with yarn
  3. Clone biotope-build repository
  4. Install dependencies in biotope-buid with yarn
  5. Run yarn link in @biotope/build repo
  6. Run yarn link @biotope/build in biotope-boilerplate repo
  7. Happy developing 👋

Undo local dev changes

  1. Run yarn unlink in @biotope/build repo
  2. Run yarn unlink @biotope/build in biotope-boilerplate repo
  3. Run yarn in biotope-boilerplate repo

Troubleshooting, Bugs & Issues

Knows issues

  • Missing documentation (on the roadmap)
  • Poor performance (on the roadmap)

If you encounter errors, please submit an issue.

You can’t perform that action at this time.