balm@3(v3) supports for [email protected]+, postcss@7, webpack@4

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

:rocket: 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.
└── ...

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 18.12.0 by running node -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

1. Installing balm

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
};

:page_with_curl: Refer to configuration docs to learn more about 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

• [x] HTML boilerplate
• [x] Laravel
• [x] TypeScript
• [x] Yours awesome projects...

Documentation

To download example and try it, visit balm.js.org.

• Getting Started
• Configuration
• Custom Task API
• Advanced Usage

Ecosystem

| Project | Status | Description | | ---------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------ | | balm-core | | :black_joker: BalmJS compiler core (required for balm 3.0+) | | balm | | :black_joker: BalmJS runtime core | | balm-cli | | :spades: BalmJS scaffolding tool | | balm-gui | N/A | :clubs: GUI for BalmJS | | balm-ui-lite | | :hearts: Material Design Lite + Vue | | balm-ui | | :diamonds: Next Generation Material UI for Vue.js | | balm-scroll | | :scroll: Smooth scrolling for Vue.js | | balm-ui-pro | | More configuration definition, less code implementation for Vue.js | | balm-git-flow | | The best practices for front-end git flow |

Contributing

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.

License

MIT

© 2016-present, Elf-mousE