开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

Описание на русском →

Builder simplifies and accelerates the process of developing projects according to the BEM methodology, under the hood used Gulp.

Features

• Based on the BEM methodology (Block, Element, Modifier)
• Independent blocks, you can reuse it
• Redefinition levels for blocks
• Pug or Twig or simple HTML for coding
• LESS or Sass or Stylus and PostCSS for styles
• Babel 7 – the compiler for next generation JavaScript
• Generate all types of sprites (sprite.svg / sprite.png / sprite@2x.png / symbol.svg)
• JSON data for use in templates
• Generate favicons
• Creating zip archive with a complete build or development files
• Nothing unnecessary, in build only those files that are used
• Support creating files and blocks automatically
• Support creating JS or CSS bundles for every page

and more :)

How it works

You write the BEM code, a structure and dependencies are formed on the basis of the pages markup.

Navigation

• Install
• Commands
• Structure
• Usage
• FAQ
• Changelog

Install

Download or clone:

git clone https://github.com/werty1001/bemgo.git bemgo && cd bemgo

Then install dependencies with npm or yarn:

npm i [or] yarn install

And start development:

npm start

Commands

• npm i — install dependencies
• npm start — start development
• npm run do — run production build
• npm run zip — creating zip archive with a complete build
• npm run zip:dev — creating zip archive with development files
• npm run task [name] — run gulp task by name
• npm run add [command] — fast make blocks and files from terminal
• npm run clean — remove unused blocks *
• npm run init — clone new repository instead app folder **

Be careful!

* Unused blocks and elements in the code will be removed immediately from all levels!

** The app folder (with all development files) will be deleted completely, a new project with github will be cloned in its place (the repository can be changed in package.json, this one will be cloned by default).

Structure

bemgo/
│
├── app/                 # Dev source
├── dist/                # Build will be here
├── core/                # Core
├── tasks/               # Tasks
│
├── gulpfile.js
└── package.json

App has the following file structure:

app/
│
├── pages/               # Pages
│   ├── index.html
│   └── about.html
│
├── blocks/              # Blocks
│   │
│   ├── common/          # common level
│   │   ├── block/
│   │   └── block2/ 
│   │
│   └── develop/         # develop level
│       ├── block/
│       ├── block2/
│       └── block3/
│
├── config.js            # App's config
│
└── icon.png             # Icon for generate favicons

Block has flat structure and all files and folders is optional:

block/
│
├── fonts/               # Fonts
│   └── Roboto.woff2
│
├── img/                 # Any images for style
│   │
│   ├── sprite/          # Icons for sprite here (png or svg)
│   │   ├── mail.png
│   │   └── [email protected]
│   │
│   └── bg.png
│
├── symbols/             # Icons for symbol sprite (only svg)
│   └── arrow.svg
│
├── assets/              # Any assets files
│   └── image.jpg
│
├── block.js
├── block.html
├── block.css
├── block__el.css
├── block__el.js
│
├── deps.js              # block dependencies
│
└── data.json            # JSON data for use in templates

Usage

• App's config
• Templates
• Styles
• Raster and vector sprites
• SVG symbols
• Block dependencies
• Automatic creation of files and blocks
• Generate favicons
• Redefinition levels
• Image optimization
• Fast make blocks and files from terminal
• Default content in new files
• Bundles
• Remove unused blocks
• Add task

App's config

All the basic settings are stored in a single file app/config.js, this approach allows you to use the same builder for different projects and configure each application individually.

If there is no config.js, then the default settings will be used, after any changes in the configuration, you need to restart the development mode!

Default settings:

module.exports = {
  
  // Used technologies
  use: {
    templates: '.html', // '.html' or '.pug' or '.twig'
    scripts: '.js',     // only '.js'
    styles: '.css',     // '.css' or '.styl' or '.less' or '.scss' or '.sass'
  },

  // Main build settings
  build: {

    autoprefixer: [ 'last 3 versions' ], // autoprefixer
    babel: false, // need Babel?
    BEML: false, // need BEM postprocessor in HTML
    
    bundles: [], // need CSS/JS bundles, may [ 'css', 'js' ]
    sourcemaps: [], // need sourcemaps, may [ 'css', 'js' ]
    imagemin: [], // need image optimization, may [ 'png', 'jpg', 'svg', 'gif' ]

    mainBundle: 'app', // main bundle name
    mainLevel: 'develop', // main level name
    
    pugMap: false, // path (from root) for generate PUG map
    globalStyles: false, // path (from root) for global styles
    
    addVersions: true, // need versions (?v=23413)
    HTMLRoot: './', // root for paths at static files in HTML
 
  },

  // Production structure
  dist: {
    styles: 'styles',
    fonts: 'styles/fonts',
    img: 'styles/img',
    symbol: 'styles/img',
    scripts: 'scripts',
    static: 'static',
    favicons: 'favicons',
  },
  
  // HTML formatting settings (details below)
  HTMLBeautify: {},

  // Settings for automatic file creation (details below)
  autoCreate: {},

  // Settings for default content in files (details below)
  addContent: {},

  // Blanks for creating blocks from the terminal (details below)
  fastMake: {},

  // Settings for generate favicons (details below)
  favicons: {},

  // Data for the manifest (details below)
  manifest: {},

  // The order of import files from different levels (details below)
  levels: {},

  // Settings for image optimization (details below)
  optimization: {},
  
  // List of blocks protected from clean (details below)
  cleanProtect: [],

}

Templates

Pug / Twig or plain HTML can be used as a template maker.
HTML is the default, but you can change this in config.js

// app/config.js

use: {
  templates: '.pug', // Pug, I choose you!
  ...
},

Now the build will look for pug files.

JSON data in markup

Each block can have a data file data.json, this data is available in the markup, for example, we have a message block with a json file:

// message/data.json

{
  "greeting": "Hello, world!"
}

This data is easily get from a special object global.jsons

// page.pug

h1= global.jsons.message.greeting

// page.html

<h1>@@global.jsons.message.greeting</h1>

// page.twig

<h1>{{ global.jsons.message.greeting }}</h1>

Pathways

Each block has its own folder with assets, so you need to specify placeholder before specific file.

A placeholder consists of a "@" symbol and a block name.

For example, we have a block with a card/assets/man.png image, in the markup, you need to specify the path like this:

<img src="@card/man.png" alt="">

There are also special placeholders:

@styles - styles folder
@symbol - way to SVG symbol
@scripts - scripts folder
@favicons - favicons folder

Automatic insert of scripts and styles

The system of dependencies eliminates the need to connect JS and CSS files to the page with your hands, now it is enough to specify a special comment and everything will be done automatically.

<html>
  <head>
    <!-- BEMGO:styles --> // CSS files will be here
  </head>
  <body>
    ...
    <!-- BEMGO:scripts --> // and here JS files
  </body>
</html>

PUG Template

When working with PUG, it is convenient to put some blocks into mixins and call them, but there is one problem - there is no dynamic connection in the template engine, and it is painful to connect the mixin each time :)

The builder provides for the automatic include of all PUG files in one. This completely solves the problem, and you just need to specify the path where to write the map files in config.js and then include it to your layout.

// app/config.js

build: {
  ...

  pugMap: 'app/blocks/map.pug', // path from root **
},

** This map will be updated automatically, no need to change something with your hands!

Advanced HTML

You can opt out of template engines and write markup on regular HTML with additional plugin, which allows you to load pieces of HTML code, use variables and cycles, as well as conditional constructions, you can learn more about how this plugin works here.

BEM marking

If you don’t like to write BEM code with your hands, then there are several plugins in the build that simplify this task.

• Bemto - for Pug

include /node_modules/bemto.pug/bemto

+b.block
  +e.element Text

• BemPug - for Pug

include /node_modules/bempug/index

+b( 'block' )
  +e( 'element' ) Text

• BEML - universal plugin, it can be activated in config.js

<div block="block">
  <div elem="element">Text</div>
</div>

// app/config.js

build: {
  ...

  BEML: true,
},

HTML formatting

You can set up beautiful formatting of HTML code using js-beautify, for this you need to specify the settings in config.js

// app/config.js

HTMLBeautify: {
  indent_size: 2,
  indent_char: ' ',
  indent_with_tabs: false,
  indent_inner_html: true,
  end_with_newline: false,
  extra_liners: [],
  preserve_newlines: true,
  max_preserve_newlines: 2,
  inline: [],
  unformatted: [],
  content_unformatted: [ 'pre', 'textarea' ],
},

Full settings you can find here.

Styles

As a preprocessor for styles, you can use LESS / Sass / Stylus or use plain CSS.
CSS is the default, but you can change this in config.js

// app/config.js

use: {
  ...
  styles: '.styl', // Stylus I choose you!
},

Most likely you have some kind of common file with variables or mixins, but in the conditions of independence of the blocks it will have to be imported into each style separately. To put it mildly, this is not the most convenient option, so there is a better way - you can specify a specific file (or an array of files) in the settings and it will be imported automatically.

// app/config.js

build: {
  ...

  globalStyles: 'app/blocks/global.styl' // Path from root to variables file
},

PostCSS

The following PostCSS plugins are used by default:

• autoprefixer - always
• postcss-sprites - only in production build
• stylefmt - only in production build

Additional plug-ins you can always add yourself is easy.

Raster and vector sprites

You can easily build vector and raster sprites (for different screens), for this is used a wonderful PostCSS plugin.

Importantly, in the development mode, sprites are not created, only during the production build!

All icons for the sprite must be stored in a separate block directory (img/sprite) and simply used as normal images, during the production build all the icons in CSS that are in this directory will be turned into a sprite.

/* zoom/zoom.css */

.zoom {
  width: 24px;
  height: 24px;
  background: url('img/sprite/zoom.png') no-repeat center;
}

.zoom_active {
  background: url('img/sprite/zoom_active.png') no-repeat center;
}

As a result, in the production build will be:

.zoom {
  width: 24px;
  height: 24px;
  background-image: url('img/sprite.png');
  background-position: 0 0;
  background-size: 48px 24px;
}

.zoom_active {
  background-image: url('img/sprite.png');
  background-position: -24px 0;
  background-size: 48px 24px;
}

Previously, you had to create a map with variables for each preprocessor, and now simple and clear CSS code, and all that is superfluous is under the hood.

For retina

You can create sprites for screens with high pixel density (2x, 3x, 4x, etc.), for this it is enough to make an icon in the desired size and add density before the file extension, for example for 2x and 3x:

/* zoom/zoom.css */

.zoom {
  width: 24px;
  height: 24px;
  background: url('img/sprite/zoom.png') no-repeat top center;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .zoom {
    background: url('img/sprite/[email protected]') no-repeat center/cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .zoom {
    background: url('img/sprite/[email protected]') no-repeat center/cover;
  }
}

In the production build will be three sprites - normal and for retina screens (for 192dpi and 288dpi).

Vector

At the same time with raster sprites, you can create vector ones, the same principle, only with SVG icons:

.zoom {
  width: 24px;
  height: 24px;
  background: url('img/sprite/zoom.svg') no-repeat center;
}

SVG symbols

In addition to the usual style sprites, you can use SVG symbols in HTML, the icons for this sprite need to be stored in a separate block folder (symbols). For each icon, your ID will be generated according to the blockName__iconName pattern, for example:

card/symbols/arrow.svg → #card__arrow

Use SVG

There are several options for use SVG, you can embed directly into the HTML code, for this you need to specify a special comment:

<!-- BEMGO:symbol -->

Then in the use tag you need only the ID:

<svg>
  <use xlink:href="#card__arrow"></use>
</svg>

The second option is an external file, then a special placeholder must be specified in the use tag:

<svg>
  <use xlink:href="@symbol#card__arrow"></use>
</svg>

SVG Transformation

If at least one SVG icon is found in the page code, the build will look for a special sy