Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/balmjs/balm
:black_joker: An universal Front-End workflow for webapps
https://github.com/balmjs/balm
balm front-end gulp nodejs webapp webpack workflow
Last synced: 2 days ago
JSON representation
:black_joker: An universal Front-End workflow for webapps
- Host: GitHub
- URL: https://github.com/balmjs/balm
- Owner: balmjs
- License: mit
- Created: 2016-05-30T01:37:26.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-11-27T06:29:16.000Z (about 1 month ago)
- Last Synced: 2024-12-20T19:15:41.460Z (6 days ago)
- Topics: balm, front-end, gulp, nodejs, webapp, webpack, workflow
- Language: TypeScript
- Homepage: https://balm.js.org
- Size: 20.3 MB
- Stars: 27
- Watchers: 5
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[![NPM version][balm-image]][balm-url]
[![License][license-image]][license-url]
[![Coverage Percentage][cover-image]][cover-url]
BalmJS
An universal Front-End workflow for webapps
> [`balm@3`](https://github.com/balmjs/balm/tree/master)(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](https://github.com/balmjs/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](https://nodejs.org/en/download/) 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](https://balm.js.org/docs/guide/structure.html).
To create a new workspace and initial starter app:
```sh
# /path/to/YOUR_WORKSPACE
mkdir -p my-project/src/{styles,scripts}
echo "Hello World" > my-project/src/index.htmlcd my-project
npm init -y
```### 1. Installing `balm`
```sh
yarn global add balm-core
yarn add -D balm
```OR
```sh
npm install -g balm-core
npm install -D balm
```> We currently recommend using [Yarn](https://yarnpkg.com/en/docs/install) instead of npm.
### 2. Configuration
In your project directory, create a file named `balm.config.js` in your project root with these contents:
```js
module.exports = {
// Your project config
};
```:page_with_curl: Refer to [configuration docs](https://balm.js.org/docs/config/) to learn more about config **`balm`**.
### 3. Usage
Edit `package.json` in your project directory:
```json
{
"scripts": {
"dev": "balm",
"prod": "balm -p"
}
}
```Run the command in your project directory:
```sh
# For development
npm run dev# For production
npm run prod
```## Demo
- [x] [HTML boilerplate](https://github.com/balmjs/demo-html5-boilerplate)
- [x] [Laravel](https://github.com/balmjs/demo-laravel)
- [x] [TypeScript](https://github.com/balmjs/demo-ts)
- [x] Yours awesome projects...## Documentation
To download [example](https://balm.js.org/balm-example.zip) and try it, visit [balm.js.org](https://balm.js.org/docs/).
- [Getting Started](https://balm.js.org/docs/guide/getting-started.html)
- [Configuration](https://balm.js.org/docs/config/)
- [Custom Task API](https://balm.js.org/docs/api/)
- [Advanced Usage](https://balm.js.org/docs/advanced/)## Ecosystem
| Project | Status | Description |
| ---------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------ |
| **[balm-core](https://github.com/balmjs/balm)** | [![NPM version][balm-core-image]][balm-core-url] | :black_joker: BalmJS compiler core (required for `balm 3.0+`) |
| **[balm](https://github.com/balmjs/balm)** | [![NPM version][balm-image]][balm-url] | :black_joker: BalmJS runtime core |
| **[balm-cli](https://github.com/balmjs/balm-cli)** | [![NPM version][balm-cli-image]][balm-cli-url] | :spades: BalmJS scaffolding tool |
| [balm-gui](https://github.com/balmjs/balm-gui) | N/A | :clubs: GUI for BalmJS |
| [balm-ui-lite](https://github.com/balmjs/ui-vue-lite) | [![NPM version][balm-ui-lite-image]][balm-ui-lite-url] | :hearts: Material Design Lite + Vue |
| **[balm-ui](https://github.com/balmjs/ui-vue)** | [![NPM version][balm-ui-image]][balm-ui-url] | :diamonds: Next Generation Material UI for Vue.js |
| [balm-scroll](https://github.com/balmjs/balm-scroll) | [![NPM version][balm-scroll-image]][balm-scroll-url] | :scroll: Smooth scrolling for Vue.js |
| **[balm-ui-pro](https://github.com/balmjs/balm-ui-pro)** | [![NPM version][balm-ui-pro-image]][balm-ui-pro-url] | More configuration definition, less code implementation for Vue.js |
| **[balm-git-flow](https://github.com/balmjs/balm-ui-pro)** | [![NPM version][balm-git-flow-image]][balm-git-flow-url] | 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](https://github.com/balmjs/balm/blob/main/CONTRIBUTING.md) before making a [pull request](https://github.com/balmjs/balm/pulls). You can submit any ideas as pull requests or as [GitHub issues](https://github.com/balmjs/balm/issues).
## License
[MIT](https://opensource.org/licenses/MIT)
© 2016-present, [Elf-mousE](http://elf-mouse.me/)
[balm-core-image]: https://img.shields.io/npm/v/balm-core.svg
[balm-core-url]: https://npmjs.org/package/balm-core
[balm-image]: https://img.shields.io/npm/v/balm.svg
[balm-url]: https://npmjs.org/package/balm
[license-image]: https://img.shields.io/npm/l/balm-core.svg?sanitize=true
[license-url]: https://www.npmjs.com/package/balm-core
[cover-image]: https://coveralls.io/repos/balmjs/balm/badge.svg
[cover-url]: https://coveralls.io/r/balmjs/balm
[balm-cli-image]: https://img.shields.io/npm/v/balm-cli.svg
[balm-cli-url]: https://npmjs.org/package/balm-cli
[balm-ui-lite-image]: https://img.shields.io/npm/v/balm-ui-lite.svg
[balm-ui-lite-url]: https://npmjs.org/package/balm-ui-lite
[balm-ui-image]: https://img.shields.io/npm/v/balm-ui.svg
[balm-ui-url]: https://npmjs.org/package/balm-ui
[balm-scroll-image]: https://img.shields.io/npm/v/balm-scroll.svg
[balm-scroll-url]: https://npmjs.org/package/balm-scroll
[balm-ui-pro-image]: https://badge.fury.io/js/balm-ui-pro.svg
[balm-ui-pro-url]: https://npmjs.org/package/balm-ui-pro
[balm-git-flow-image]: https://badge.fury.io/js/balm-git-flow.svg
[balm-git-flow-url]: https://npmjs.org/package/balm-git-flow