BalmJS prescribes best practices and tools to help you stay productive.
- Naturally: Make web development simple, natural and pleasant.
- Structure-Based: One configuration file can manage webapp projects with at least 90% use cases.
- Learn Once, Run Any Webapps: Any front-end technology stack will be developed and built in the same way.
- Based on gulp + webpack for webapp projects
- Automagically compile PostCSS/Sass/Less
- CSS Autoprefixing
- Automagically generate CSS Image Sprites
- enable ES2015+ features using Babel
- Awesome images optimization
- Built-in preview server with BrowserSync
- Custom publish assets to remote (Front-end to Back-end) project
- ZIP/FTP/PWA supported
- Easily define and extend your own tasks
๐ We recommend using Balm CLI to scaffold out a front-end web app.
project
โโโ .tmp // Scaffolds out a temporary directory for development
โโโ dist // Scaffolds out the production build
โโโฌ src // Source code in here (Create a directory in project)
โ โโโ fonts
โ โโโ images
โ โโโ media
โ โโโฌ scripts
โ โ โโโ index.js // Required. A entry file for JS.
โ โโโฌ styles
โ โ โโโ main.css // Required. A entry file for CSS.
โ โโโ index.html // Required. A entry file for HTML.
โโโ .dotfile // (e.g. .gitignore, .browserslistrc, etc...)
โโโ babel.config.js
โโโ balm.config.js // Required. A configuration file for Balm.
โโโ package.json // Required.
โโโ ...
You need to set up your development environment before you can do anything.
Install Node.jsยฎ and npm if they are not already on your machine.
Verify that you are running at least node
10.13.0
and npm5.2.0
by runningnode -v
andnpm -v
in a terminal/console window. Older versions maybe produce errors, but newer versions are fine.
You develop apps in the context of an Balm workspace.
To create a new workspace and initial starter app:
# /path/to/YOUR_WORKSPACE
mkdir -p my-project/src/{styles,scripts}
echo "Hello World" > my-project/src/index.html
cd my-project
npm init -y
yarn global add balm-core
yarn add -D balm
OR
npm install -g balm-core
npm install -D balm
We currently recommend using Yarn instead of npm.
In your project directory, create a file named balm.config.js
in your project root with these contents:
module.exports = {
// Your project config
};
๐ Refer to configuration docs to learn more about config balm
.
Edit package.json
in your project directory:
{
"scripts": {
"dev": "balm",
"prod": "balm -p"
}
}
Run the command in your project directory:
# For development
npm run dev
# For production
npm run prod
- HTML boilerplate
- Laravel
- TypeScript
- Yours awesome projects...
To download example and try it, visit balm.js.org.
Project | Status | Description |
---|---|---|
balm-core | ๐ BalmJS compiler core (required for balm 3.0 ) |
|
balm | ๐ BalmJS runtime core | |
balm-cli | ||
balm-gui | N/A | |
balm-ui-lite | ||
balm-ui | ||
balm-scroll | ๐ Smooth scrolling for Vue.js |
We'd love for you to contribute and make BalmJS even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.
ยฉ 2016-present, Elf-mousE