Skip to content
🃏 A flexible Front-End workflow for any webapps
TypeScript JavaScript HTML CSS Vue PHP
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintignore 2.14.0 May 24, 2020
.npmrc add pwa task for test Apr 30, 2019
.prettierrc clean code & update test Apr 3, 2020
.travis.yml update test Apr 26, 2020 2.16.0 May 31, 2020
gulpfile.esm.js balm 2.0.0-beta Sep 30, 2019
tslint.json first commit for next Aug 27, 2019


NPM version node Dependency Status Build Status Build Status Coverage Percentage


A flexible Front-End workflow for webapps

What's BalmJS?

BalmJS prescribes best practices and tools to help you stay productive.


  • gulp + webpack for any Front-end projects
  • Automagically compile PostCSS/Sass/Less
  • CSS Autoprefixing
  • Automagically generation CSS 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


Returning to webapp's original nature.

├── .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.
├─┬ config       // Optional. But recommended. Refer to BalmCLI's templates.
│ ├── balmrc.js
│ └── publish.js
├── .dotfile     // (e.g. .gitignore, .browserslistrc, etc...)
├── babel.config.js
├── gulpfile.js  // Required. A configuration file for Balm.
├── package.json // Required.
└── ...

🚀 We recommend using Balm CLI to scaffold out a front-end web app. 👻


Project Status Description
balm-cli NPM version ♠️ BalmJS scaffolding tool
balm-gui N/A ♣️ GUI for BalmJS
balm-ui-lite NPM version ♥️ Material Design Lite + Vue
balm-ui NPM version ♦️ Next Generation Material UI for Vue.js
balm-scroll NPM version 📜 Smooth scrolling for Vue.js



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.x and npm 5.2.x by running node -v and npm -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:

mkdir -p balm-project/src/{styles,scripts}
cd balm-project
npm init -y

🔔 BalmJS workflow using gulp for the build process, so you need install gulp-cli globally and gulp local dependency.

yarn global add gulp-cli
yarn add -D gulp
# OR
npm install -g gulp-cli
npm install -D gulp

# Verify
$ gulp -v
# Output:
# CLI version: 2.2.0
# Local version: 4.0.0

1. Installing balm

yarn add -D balm
# OR
npm install -D balm

We currently recommend using Yarn instead of npm.

2. Configuration

In your project directory, create a file named gulpfile.js in your project root with these contents:

// 1. import balm
const balm = require('balm');

// 2. config balm
balm.config = {
  // Your project config

// 3. run & enjoy

📃 Refer to configuration docs to learn more about config balm.

3. Usage

Run the command in your project directory:

# For development

# For production
gulp --production
# OR
gulp -p




© 2016-present, Elf-mousE

Special Thanks to

In chronological order

You can’t perform that action at this time.