Introduction
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.
Features
- 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
Structure
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.
└── ...
Installation
0. Requirements
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
balm
1. Installing 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.
2. Configuration
In your project directory, create a file named balm.config.js
in your project root with these contents:
module.exports = {
// Your project config
};
balm
.
3. Usage
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
Demo
- HTML boilerplate
- Laravel
- TypeScript
- Yours awesome projects...
Documentation
To download example and try it, visit balm.js.org.
Ecosystem
Project | Status | Description |
---|---|---|
balm-core | balm 3.0 ) |
|
balm | ||
balm-cli | ||
balm-gui | N/A | |
balm-ui-lite | ||
balm-ui | ||
balm-scroll |
Support
Please, don't hesitate to file an issue if you have questions.
License
© 2016-present, Elf-mousE