Sorry, this project is unmaintained 😢

We recommend the following tooling:

• React Apps: Create React Apps or Parcel
• Static Sites: Eleventy or Awesome Static Web Site Generators

<hr>

Baumeister – The frontend build workflow for your needs

<p align="center"> <img width="50%" src="https://cdn.rawgit.com/micromata/baumeister-media/master/dist/Baumeister-Logo-Default.svg" alt="Baumeister Logo"> </p>

Baumeister is here to help you to build your things. From Bootstrap themes over static websites to single page applications. Baumeister provides:

• a file structure with focus on maintainability and upgradability
• a build setup based on webpack and npm scripts with the following »features«
  • generate static sites with ease using handlebars templates
    • optional – see details
  • transpile, bundle and minify your code
    • ES6 as well as Sass
  • visualize size of bundled files with an interactive zoomable treemap
  • remove console output and debugger statements in production files
  • add vendor prefixes
  • lint JavaScript, Sass and HTML
  • optimize images (lossless)
  • start a local server
  • delete unused CSS (optional)
  • check for known vulnerabilities in dependencies
  • release new versions
  • run unit tests and create coverage reports
  • web performance optimization fundamentals
  • automatically format code
  • and more.

Baumeister mainly uses webpack at its core for transpiling, bundling and minifying files and provides npm scripts for working with the project. Besides that we have defined a few npm scripts to handle things like our release workflow. All necessary dependencies are installed locally via npm.

Table of Contents

• Quick install guide
• Dependencies
• Setting up the project
• Build Workflow and npm scripts
• Setting up your editor
• Writing markup (static sites vs. single page apps)
• File and folder structure of Sass files
• Using external libraries
• Adding polyfills
• Unit tests
• Configuring linters
• Web performance optimization
• Automatic code formatting
• Adding banners
• Release Workflow
• Contributing to this project
• License

Quick install guide

For those already using Node.js.

via Yeoman

See: https://github.com/micromata/generator-baumeister for details.

$ npm i -g yo
$ npm i -g generator-baumeister
$ yo baumeister
$ npm start

See Build Workflow and npm scripts for the main scripts.

via Git

$ git clone https://github.com/micromata/baumeister.git
$ cd baumeister
$ npm install
$ npm start

See Build Workflow and npm scripts for the main scripts.

Dependencies

• Node.js (>=6.0.0)

Node.js

The major dependency is Node.js including the bundled package manager called »npm«. The projects dependencies are locally installed with npm.

Please enter the following in your terminal if you aren’t sure about the availability of Node.js and npm on your machine:

node --version

This should return something like the following in case Node.js and npm is already installed:

v8.9.4

If this isn’t the case you have to install Node.js first. On OS X we strongly recommend installing Node via Homebrew or the Node Version Manager. Not just because it’s easier to switch versions but also because you prevent potential permission problems when running npm. See detailed instructions.

<a name="setup"></a>

Setting up the project

Navigate to the root of your installation:

cd path/to/your/installation/of/baumeister

and install the dependencies via:

npm install

npm will look at the package.json file and automatically fetch and install the necessary local dependencies needed for our build workflow as well as the required frontend dependencies to a node_modules directory.

Adjust settings via the Baumeister configuration file

You can change the most important settings without touching any webpack config by editing Baumeisters JSON based configuration. You are free to choose to store your settings either in a file called baumeister.json (respectively .baumeister.json) or in a baumeister key in your package.json file.

{
	"useHandlebars": true,
	"purifyCSS": {
		"usePurifyCSS": false,
		"whitelist": [
			"*navbar*",
			"*modal*",
			"*dropdown*",
			"*carousel*",
			"*tooltip*",
			"open",
			"fade",
			"collapse",
			"collapsing",
			"in"
		]
	},
	"generateBanners": false,
	"cacheBusting": true,
	"vendor": {
		"bundleCSS": [],
		"includeStaticFiles": []
	},
	"webpack": {
		"DefinePlugin": {
			"development": {
				"PRODUCTION": false
			},
			"production": {
				"PRODUCTION": true
			}
		},
		"ProvidePlugin": {
			"$": "jquery",
			"jQuery": "jquery"
		}
	}
}

vendor.bundleCSS and vendor.includeStaticFiles make it possible to include additional dependencies without touching any webpack config. These settings are explained in depth in the section Using external libraries within this document.

The ramifications of changing the useHandlebars setting are explained in the section Writing markup (static sites vs. single page apps).

Adding banners describes the effects of setting generateBanners to true.

Define global constants at compile time

If you want to provide constants for different types of builds, you can define them inside the development and production properties of the DefinePlugin section.

The plugin does a direct text replacement, so the value given to it must include actual quotes inside of the string. You can use alternating quotes, like "'My value'", or use JSON.stringify('My value').

This is very useful to change the behavior between development and production build. For example adapting the URL prefix to an API. This is why we have predefined the constant PRODUCTION in baumeister.json.

You may take a look at the official webpack DefinePlugin docs.

Automatically load modules instead of requiring / importing them

The ProvidePlugin section is an object where the value equals the module name and the key represents the property name of the window object the module gets mapped to. See the official webpack ProvidePlugin docs for further information.

Build Workflow and npm scripts

Once you complete the setup, you'll be able to run various npm scripts from the command line. The main scripts needed for developing and building your project are listed below.

| Command | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------- | | npm start | Builds for development, starts a webserver, watches files for changes, rebuilds incrementally and reloads your browser. | | npm test | Lints your JavaScript files and runs unit tests via the Jest CLI. | | npm run test:watch | Runs unit test with Jests watch option. | | npm run build | Builds for production to dist directory. | | npm run build:serve | Starts a static fileserver serving the dist directory. | | npm run build:analyze | Starts »webpack bundle analyzer« to visualize size of webpack output files |

🔥 Tip:
There a lot more scripts defined in the package.json, but most of the other ones are used to combine scripts. Therefore we have set up an interactive CLI menu to list and run the most importants npm scripts via:

$ npm run tasks

Running those scripts will create a bunch of directories and files which aren’t under version control. Do not be concerned if you see these resources:

myProject
├──.metalsmith-build                → Compiled handlebars sources
├── coverage                        → Test coverage reports
├── dist                            → Contains the files ready for production
│   ├── app
│   └── assets
│   └── **.html
├── node_modules                    → Dependencies installed by npm
├── server