{"id":16331028,"url":"https://github.com/werty1001/bemgo","last_synced_at":"2025-10-25T22:30:24.702Z","repository":{"id":53149855,"uuid":"79822922","full_name":"werty1001/bemgo","owner":"werty1001","description":"Quick start of developing projects using Gulp build system and BEM methodology.","archived":true,"fork":false,"pushed_at":"2019-12-30T11:40:43.000Z","size":293,"stargazers_count":64,"open_issues_count":1,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-11T23:25:15.127Z","etag":null,"topics":["bem","gulp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/werty1001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-23T16:28:04.000Z","updated_at":"2024-04-11T11:10:58.000Z","dependencies_parsed_at":"2022-09-13T17:50:25.474Z","dependency_job_id":null,"html_url":"https://github.com/werty1001/bemgo","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werty1001%2Fbemgo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werty1001%2Fbemgo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werty1001%2Fbemgo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werty1001%2Fbemgo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/werty1001","download_url":"https://codeload.github.com/werty1001/bemgo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238216906,"owners_count":19435614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","gulp"],"created_at":"2024-10-10T23:25:18.943Z","updated_at":"2025-10-25T22:30:19.348Z","avatar_url":"https://github.com/werty1001.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"right\"\u003e\n  \u003ca href=\"README_RU.md\"\u003eОписание на русском →\u003c/a\u003e\n\u003c/p\u003e\n\n# ![BemGo](https://werty1001.github.io/bemgo.svg)\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/werty1001/bemgo/master/LICENSE) ![](https://img.shields.io/github/repo-size/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/github/stars/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/github/forks/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/travis/werty1001/bemgo.svg?style=flat-square)\n\nBuilder simplifies and accelerates the process of developing projects according to the [BEM](https://en.bem.info/) methodology, under the hood used [Gulp](http://gulpjs.com/).\n\n### Features\n* Based on the BEM methodology (Block, Element, Modifier)\n* Independent blocks, you can reuse it\n* [Redefinition levels](https://en.bem.info/methodology/redefinition-levels/) for blocks\n* [Pug](https://pugjs.org) or [Twig](http://twig.sensiolabs.org/) or simple HTML for coding\n* [LESS](http://lesscss.org/) or [Sass](http://sass-lang.com/) or [Stylus](http://stylus-lang.com/) and [PostCSS](http://postcss.org/) for styles\n* Babel 7 – the compiler for next generation JavaScript\n* Generate all types of sprites (sprite.svg / sprite.png / sprite\u003cspan\u003e\u003c/span\u003e@2x.png / symbol.svg)\n* JSON data for use in templates\n* Generate favicons\n* Creating zip archive with a complete build or development files\n* Nothing unnecessary, in build only those files that are used\n* Support creating files and blocks automatically\n* Support creating JS or CSS bundles for every page\n\nand more :)\n\n### How it works\nYou write the BEM code, a structure and dependencies are formed on the basis of the pages markup.\n\n### Navigation\n* [Install](#install)\n* [Commands](#commands)\n* [Structure](#structure)\n* [Usage](#usage)\n* [FAQ](#faq)\n* [Changelog](#changelog)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Install\n[Download](https://github.com/werty1001/bemgo/archive/master.zip) or clone:\n```bash\ngit clone https://github.com/werty1001/bemgo.git bemgo \u0026\u0026 cd bemgo\n```\nThen install dependencies with npm or yarn:\n```bash\nnpm i [or] yarn install\n```\nAnd start development:\n```bash\nnpm start\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Commands\n* `npm i` — install dependencies\n* `npm start` — start development\n* `npm run do` — run production build\n* `npm run zip` — creating zip archive with a complete build\n* `npm run zip:dev` — creating zip archive with development files\n* `npm run task [name]` — run gulp task by name\n* `npm run add [command]` — [fast make blocks and files from terminal](#fast-make-blocks-and-files-from-terminal)\n* `npm run clean` — [remove unused blocks](#remove-unused-blocks) *\n* `npm run init` — clone new repository instead app folder **\n\n### Be careful!\n\u003e \\* Unused blocks and elements in the code will be removed immediately from all levels!\n\n\u003e \\** 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](https://github.com/werty1001/app) will be cloned by default).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Structure\n\n```\nbemgo/\n│\n├── app/                 # Dev source\n├── dist/                # Build will be here\n├── core/                # Core\n├── tasks/               # Tasks\n│\n├── gulpfile.js\n└── package.json\n```\n\nApp has the following file structure:\n```\napp/\n│\n├── pages/               # Pages\n│   ├── index.html\n│   └── about.html\n│\n├── blocks/              # Blocks\n│   │\n│   ├── common/          # common level\n│   │   ├── block/\n│   │   └── block2/ \n│   │\n│   └── develop/         # develop level\n│       ├── block/\n│       ├── block2/\n│       └── block3/\n│\n├── config.js            # App's config\n│\n└── icon.png             # Icon for generate favicons\n```\n\nBlock has [flat](https://en.bem.info/methodology/filestructure/#flat) structure and all files and folders is optional:\n```\nblock/\n│\n├── fonts/               # Fonts\n│   └── Roboto.woff2\n│\n├── img/                 # Any images for style\n│   │\n│   ├── sprite/          # Icons for sprite here (png or svg)\n│   │   ├── mail.png\n│   │   └── mail@2x.png\n│   │\n│   └── bg.png\n│\n├── symbols/             # Icons for symbol sprite (only svg)\n│   └── arrow.svg\n│\n├── assets/              # Any assets files\n│   └── image.jpg\n│\n├── block.js\n├── block.html\n├── block.css\n├── block__el.css\n├── block__el.js\n│\n├── deps.js              # block dependencies\n│\n└── data.json            # JSON data for use in templates\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Usage\n\n* [App's config](#apps-config)\n* [Templates](#templates)\n* [Styles](#styles)\n* [Raster and vector sprites](#raster-and-vector-sprites)\n* [SVG symbols](#svg-symbols)\n* [Block dependencies](#block-dependencies)\n* [Automatic creation of files and blocks](#automatic-creation-of-files-and-blocks)\n* [Generate favicons](#generate-favicons)\n* [Redefinition levels](#redefinition-levels)\n* [Image optimization](#image-optimization)\n* [Fast make blocks and files from terminal](#fast-make-blocks-and-files-from-terminal)\n* [Default content in new files](#default-content-in-new-files)\n* [Bundles](#bundles)\n* [Remove unused blocks](#remove-unused-blocks)\n* [Add task](#add-task)\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# App's config\nAll 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.\n\n\u003e 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!\n\n### Default settings:\n```js\nmodule.exports = {\n  \n  // Used technologies\n  use: {\n    templates: '.html', // '.html' or '.pug' or '.twig'\n    scripts: '.js',     // only '.js'\n    styles: '.css',     // '.css' or '.styl' or '.less' or '.scss' or '.sass'\n  },\n\n  // Main build settings\n  build: {\n\n    autoprefixer: [ 'last 3 versions' ], // autoprefixer\n    babel: false, // need Babel?\n    BEML: false, // need BEM postprocessor in HTML\n    \n    bundles: [], // need CSS/JS bundles, may [ 'css', 'js' ]\n    sourcemaps: [], // need sourcemaps, may [ 'css', 'js' ]\n    imagemin: [], // need image optimization, may [ 'png', 'jpg', 'svg', 'gif' ]\n\n    mainBundle: 'app', // main bundle name\n    mainLevel: 'develop', // main level name\n    \n    pugMap: false, // path (from root) for generate PUG map\n    globalStyles: false, // path (from root) for global styles\n    \n    addVersions: true, // need versions (?v=23413)\n    HTMLRoot: './', // root for paths at static files in HTML\n \n  },\n\n  // Production structure\n  dist: {\n    styles: 'styles',\n    fonts: 'styles/fonts',\n    img: 'styles/img',\n    symbol: 'styles/img',\n    scripts: 'scripts',\n    static: 'static',\n    favicons: 'favicons',\n  },\n  \n  // HTML formatting settings (details below)\n  HTMLBeautify: {},\n\n  // Settings for automatic file creation (details below)\n  autoCreate: {},\n\n  // Settings for default content in files (details below)\n  addContent: {},\n\n  // Blanks for creating blocks from the terminal (details below)\n  fastMake: {},\n\n  // Settings for generate favicons (details below)\n  favicons: {},\n\n  // Data for the manifest (details below)\n  manifest: {},\n\n  // The order of import files from different levels (details below)\n  levels: {},\n\n  // Settings for image optimization (details below)\n  optimization: {},\n  \n  // List of blocks protected from clean (details below)\n  cleanProtect: [],\n\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Templates\n\nPug / Twig or plain HTML can be used as a template maker.  \nHTML is the default, but you can change this in [config.js](#apps-config)\n```js\n// app/config.js\n\nuse: {\n  templates: '.pug', // Pug, I choose you!\n  ...\n},\n\n```\nNow the build will look for pug files.  \n### JSON data in markup\nEach 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:\n\n```json\n// message/data.json\n\n{\n  \"greeting\": \"Hello, world!\"\n}\n```\nThis data is easily get from a special object **global.jsons**\n```pug\n// page.pug\n\nh1= global.jsons.message.greeting\n\n```\n```html\n// page.html\n\n\u003ch1\u003e@@global.jsons.message.greeting\u003c/h1\u003e\n\n```\n```twig\n// page.twig\n\n\u003ch1\u003e{{ global.jsons.message.greeting }}\u003c/h1\u003e\n\n```\n### Pathways\nEach block has its own folder with assets, so you need to specify placeholder before specific file.\n\u003e A placeholder consists of a \"@\" symbol and a block name.\n\nFor example, we have a block with a **card/assets/man.png** image, in the markup, you need to specify the path like this:\n```html\n\u003cimg src=\"@card/man.png\" alt=\"\"\u003e\n```\nThere are also special placeholders:\n```html\n@styles - styles folder\n@symbol - way to SVG symbol\n@scripts - scripts folder\n@favicons - favicons folder\n```\n\n### Automatic insert of scripts and styles\n[The system of dependencies](#block-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.\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- BEMGO:styles --\u003e // CSS files will be here\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n    \u003c!-- BEMGO:scripts --\u003e // and here JS files\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### PUG Template\nWhen 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 :)\n\nThe 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](#apps-config) and then include it to your layout.\n```js\n// app/config.js\n\nbuild: {\n  ...\n\n  pugMap: 'app/blocks/map.pug', // path from root **\n},\n```\n\u003e \\** This map will be updated automatically, no need to change something with your hands!\n\n### Advanced HTML\nYou 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](https://www.npmjs.com/package/gulp-file-include).\n\n### BEM marking\nIf you don’t like to write BEM code with your hands, then there are several plugins in the build that simplify this task.\n* [Bemto](https://github.com/kizu/bemto) - for Pug\n```pug\ninclude /node_modules/bemto.pug/bemto\n\n+b.block\n  +e.element Text\n```\n\n* [BemPug](https://github.com/werty1001/bempug) - for Pug\n```pug\ninclude /node_modules/bempug/index\n\n+b( 'block' )\n  +e( 'element' ) Text\n```\n\n* [BEML](https://github.com/zenwalker/node-beml) - universal plugin, it can be activated in [config.js](#apps-config)\n```html\n\u003cdiv block=\"block\"\u003e\n  \u003cdiv elem=\"element\"\u003eText\u003c/div\u003e\n\u003c/div\u003e\n```\n```js\n// app/config.js\n\nbuild: {\n  ...\n\n  BEML: true,\n},\n```\n### HTML formatting\nYou can set up beautiful formatting of HTML code using [js-beautify](https://github.com/beautify-web/js-beautify), for this you need to specify the settings in [config.js](#apps-config)\n```js\n// app/config.js\n\nHTMLBeautify: {\n  indent_size: 2,\n  indent_char: ' ',\n  indent_with_tabs: false,\n  indent_inner_html: true,\n  end_with_newline: false,\n  extra_liners: [],\n  preserve_newlines: true,\n  max_preserve_newlines: 2,\n  inline: [],\n  unformatted: [],\n  content_unformatted: [ 'pre', 'textarea' ],\n},\n```\nFull settings you can find [here](https://github.com/beautify-web/js-beautify#css--html).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Styles\nAs a preprocessor for styles, you can use LESS / Sass / Stylus or use plain CSS.  \nCSS is the default, but you can change this in [config.js](#apps-config)\n\n```js\n// app/config.js\n\nuse: {\n  ...\n  styles: '.styl', // Stylus I choose you!\n},\n```\nMost 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.\n```js\n// app/config.js\n\nbuild: {\n  ...\n\n  globalStyles: 'app/blocks/global.styl' // Path from root to variables file\n},\n```\n\n### PostCSS\nThe following PostCSS plugins are used by default:\n* [autoprefixer](https://github.com/postcss/autoprefixer) - always\n* [postcss-sprites](https://github.com/2createStudio/postcss-sprites) - only in production build\n* [stylefmt](https://github.com/morishitter/stylefmt) - only in production build\n\nAdditional plug-ins you can always add yourself is easy.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Raster and vector sprites\nYou can easily build vector and raster sprites (for different screens), for this is used a wonderful [PostCSS plugin](https://github.com/2createStudio/postcss-sprites).\n\n\u003e Importantly, in the development mode, sprites are not created, only during the production build!\n\nAll 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.\n```css\n/* zoom/zoom.css */\n\n.zoom {\n  width: 24px;\n  height: 24px;\n  background: url('img/sprite/zoom.png') no-repeat center;\n}\n\n.zoom_active {\n  background: url('img/sprite/zoom_active.png') no-repeat center;\n}\n```\nAs a result, in the production build will be:\n\n```css\n\n.zoom {\n  width: 24px;\n  height: 24px;\n  background-image: url('img/sprite.png');\n  background-position: 0 0;\n  background-size: 48px 24px;\n}\n\n.zoom_active {\n  background-image: url('img/sprite.png');\n  background-position: -24px 0;\n  background-size: 48px 24px;\n}\n```\nPreviously, 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.\n\n### For retina\nYou 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:\n```css\n/* zoom/zoom.css */\n\n.zoom {\n  width: 24px;\n  height: 24px;\n  background: url('img/sprite/zoom.png') no-repeat top center;\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .zoom {\n    background: url('img/sprite/zoom@2x.png') no-repeat center/cover;\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .zoom {\n    background: url('img/sprite/zoom@3x.png') no-repeat center/cover;\n  }\n}\n```\nIn the production build will be three sprites - normal and for retina screens (for 192dpi and 288dpi).\n### Vector\nAt the same time with raster sprites, you can create vector ones, the same principle, only with SVG icons:\n```css\n\n.zoom {\n  width: 24px;\n  height: 24px;\n  background: url('img/sprite/zoom.svg') no-repeat center;\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# SVG symbols\nIn 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:\n```\ncard/symbols/arrow.svg → #card__arrow\n```\n### Use SVG\nThere are several options for use SVG, you can embed directly into the HTML code, for this you need to specify a special comment:\n```html\n\u003c!-- BEMGO:symbol --\u003e\n```\nThen in the use tag you need only the ID:\n```html\n\u003csvg\u003e\n  \u003cuse xlink:href=\"#card__arrow\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\nThe second option is an external file, then a special placeholder must be specified in the use tag:\n```html\n\u003csvg\u003e\n  \u003cuse xlink:href=\"@symbol#card__arrow\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n### SVG Transformation\nIf at least one SVG icon is found in the page code, the build will look for a special symbol block at the main development level (see **mainLevel** property in [config.js](#apps-config)), you can create two `prepend.svg` and `append.svg` files inside this block and then the contents of these files will be added to the SVG body (at the beginning and at the end).\n\n### Get icons for SVG\nIn development mode, all icons from all blocks will be added to the sprite, but only those icons that are in your code (with the «correct» ID) will be included in the production build.\n\u003e You can also add a special key @always before expanding the icon, then it will fall into the sprite anyway:\n```\ncard/symbols/arrow@always.svg\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Block dependencies\nFor any block, you can specify dependencies (other blocks or modules) in the deps.js file\n```js\n// deps.js\n\nmodule.exports = {\n\n  nodes: [], // Nodes: blocks / elements / modifiers\n\n  modules: [], // Modules\n\n}\n```\nFor example, there is a **select** block and with the help of JS, the **select_open** modifier is dynamically added to it, there is no this modifier in the HTML code, so the builder does not know about it; to fix this, it is enough to add this modifier in the deps.js file\n\n```js\n// select/deps.js\n\nmodule.exports = {\n\n  nodes: [\n    'select_open'\n  ],\n\n}\n```\nNow everything is fine, the builder takes this modifier. By analogy, you can add other nodes (elements and blocks) that are not in the code, but they should still be included in the build.\n### Modules\nThe second variant of dependencies is modules, each module is an object with three properties:\n```js\n// deps.js\n\nmodule.exports = {\n\n  modules: [\n    {\n      from: '',   // module location (CDN or path from the root)\n      inject: [], // list of files to be used as separate files\n      import: [], // list of files to be imported into the common bundle\n    },\n  ],\n\n}\n```\nFor example, we have a **slider** block, for full-fledged work, it needs the [slick plugin](http://kenwheeler.github.io/slick/), which in turn uses the jQuery library:\n```js\n// slider/deps.js\n\nmodule.exports = {\n\n  modules: [\n    {\n      from: 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/', // jQuery from CDN\n      inject: [ 'jquery.min.js' ], // this file will be used on the page separately\n    },\n    {\n      from: 'node_modules/slick-carousel/slick', // get slick from node_modules\n      inject: [ 'slick.min.js' ], // this file will be used on the page separately\n      import: [ 'slick.css' ], // this file will be imported into the common bundle\n    },\n  ],\n\n}\n```\nNow when using the slider block on the page, the jQuery library and the slick.min.js plugin will be used too, all the images and fonts from slick.css will automatically be pulled into the build.\n\n* If the module does not have the from property, then the file search will take place in the block itself (in the assets folder).\n* Files from CDN can not be imported, only used as external files.\n\nIf you need to connect the JS file asynchronously, simply add @async or @defer to the end:\n```js\n{\n  from: 'node_modules/slick-carousel/slick',\n  inject: [ 'slick.min.js@async' ], // this script will be used on the page with the async attribute.\n},\n```\nFor a more subtle use of the module, a special filter function is provided that will be called for each file from inject and import:\n```js\nfilter ( file, node, page, type ) {\n\n  // file - full path of the included file\n  // node - block object with all attributes\n  // page - page name\n  // type - use type, 'inject' or 'import'\n\n  console.log( node ) // { name: 'link', attrs: { class: 'link' }, tag: 'a' }\n\n  return true // the function should return true or false (use or not)\n}\n```\nSuppose I have a **link** block and this block sometimes needs a [lightbox plugin](https://lokeshdhakar.com/projects/lightbox2/), but you need to connect it only under certain conditions - when the block has the **link_zoom** modifier:\n```js\n// link/deps.js\n\nmodule.exports = {\n\n  modules: [\n    {\n      from: 'node_modules/lightbox2/dist/',\n      inject: [ 'js/lightbox.js' ],\n      import: [ 'css/lightbox.css' ],\n      filter ( file, node ) {\n        return node.attrs.class.split( ' ' ).includes( 'link_zoom' ) // check\n      }\n    },\n  ],\n\n}\n```\nA simple check in one line solves the problem, now the module will pull up only at the right moment.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Automatic creation of files and blocks\nYou just write the BEM code, and the blocks and files are created automatically.  \nBy default, this feature is turned off, to activate it, you need to add settings to [config.js](#apps-config)\n```js\n// app/config.js\n\nautoCreate: {\n  onlyOnWatch: true, // create files always or only during watch\n  folders: [], // the list of directories of the new block, for example: 'img', 'assets'\n  files: [], // list of files of the new node, for example: '.css', '.js', 'data.json'\n  levels: [], // levels where blocks will be created, for example: 'develop'\n  ignoreNodes: [], // list of nodes that will be completely ignored **\n},\n\n```\n\u003e \\** You can use regular expressions here!\n\nSuppose I need to create blocks at the develop level, each new block must have a style file, a script and a folder for pictures, but at the same time, you need to ignore the elements and not create files for them:\n```js\n// app/config.js\n\nautoCreate: {\n  onlyOnWatch: true, // create files only during watch\n  folders: [ 'assets' ], // assets folder created for new blocks\n  files: [ '.css', '.js' ], // new node will have style and script\n  levels: [ 'develop' ], // new blocks are created only at the develop level\n  ignoreNodes: [ /__[\\w]/i ], // all elements will be ignored\n},\n\n```\nGood, but with such settings, each JS and CSS file will also be created for each block modifier, if you do not need it, you can add more settings:\n```js\n// app/config.js\n\nautoCreate: {\n  onlyOnWatch: true,\n  folders: [ 'img', 'assets' ],\n  files: [ '.css', '.js' ],\n  levels: [ 'develop' ],\n  ignoreNodes: [ /__[\\w]/i ],\n  ignoreStyle: [ /[a-z\\d](_|--)[a-z\\d]/i ], // ignore modifiers when creating styles\n  ignoreScript: [ /[a-z\\d](_|--)[a-z\\d]/i  ], // ignore modifiers when creating scripts\n  ignoreTemplate: [], // by analogy, you can specify for templates\n},\n\n```\nIn fact, we could just ban modifiers as well as elements, but to demonstrate all the possibilities let it be so :)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Generate favicons\n\n1. First you need to place your icon in the root of the development folder (**app/icon.png**).\n2. Next, in the [config.js](#apps-config), you need to specify which icons to create.\n\n\u003e If there is no icon.png, then nothing will be created, and in development mode this task is always ignored!\n\n```js\n// app/config.js\n\nfavicons: {\n  android: false,\n  appleIcon: false,\n  appleStartup: false,\n  coast: false,\n  favicons: true, // by default only this property is true\n  firefox: false,\n  windows: false,\n  yandex: false,\n},\n\n// You can also specify data for the manifest\n\nmanifest: {\n  appName: null,\n  appShortName: null,\n  appDescription: null,\n  ...\n}\n```\nTo create icons, [this plugin](https://github.com/itgalaxy/favicons) is used, you can see the full settings on the link, I note that the plugin allows you to specify the data for the manifest, the color for the background of the icons and various other things.\n\n### Insert Favicons\nIn the markup, you can specify a special comment and then the basic icons will be insert automatically, if found:\n```\n\u003c!-- BEMGO:favicons --\u003e\n```\n```html\n\u003cmeta name=\"msapplication-config\" content=\"./favicons/browserconfig.xml\"\u003e\n\u003clink rel=\"shortcut icon\" href=\"./favicons/favicon.ico\" type=\"image/x-icon\"\u003e\n\u003clink rel=\"icon\" href=\"./favicons/favicon-16x16.png\" sizes=\"16x16\" type=\"image/png\"\u003e\n\u003clink rel=\"icon\" href=\"./favicons/favicon-32x32.png\" sizes=\"32x32\" type=\"image/png\"\u003e\n\u003clink rel=\"apple-touch-icon\" href=\"./favicons/apple-touch-icon.png\" sizes=\"180x180\"\u003e\n\u003clink rel=\"mask-icon\" href=\"./favicons/safari-pinned-tab.svg\" color=\"#0f54b9\"\u003e\n\u003clink rel=\"manifest\" href=\"./favicons/manifest.json\"\u003e\n```\nIf you have ready-made icons at once, then you can put them in any block (for example, root) in the assets/favicons folder, adding the special @always key before the extension (favicon\u003cspan\u003e\u003c/span\u003e@always.ico) to the files, then these icons will be copied into the production.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Redefinition levels\nTo organize the blocks, you can use any number of levels, several or only one, while the files will be searched for all, and the order of import styles and scripts from different levels can be configured in [config.js](#apps-config)\n```js\n// app/config.js\n\nlevels: {\n  common: 1, // first from here\n  develop: 2, // then from here\n},\n```\nSuppose we have a **button** block at the common and develop level:\n```css\n/* common/button/button.css */\n\n.button {\n  background-color: #cf2318;\n  text-align: center;\n}\n```\n```css\n/* develop/button/button.css */\n\n.button {\n  background-color: transparent;\n}\n```\nIn the main bundle file will be both CSS rules:\n```css\n/* app.css */\n\n.button {\n  background-color: #cf2318;\n  text-align: center;\n}\n\n.button {\n  background-color: transparent; /* This rule will change the background color. */\n}\n```\nThus, we redefined the background for the button, without touching the file at the common level. \n\n\u003e These are the basic redefinition capabilities, if you need more advanced settings, then I advise you to look at the stack from Yandex.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Image optimization\n\nYou can enable image compression in [config.js](#apps-config)\n\u003e There will be no optimization in the development mode, only during the production build!\n```js\n// app/config.js\n\nbuild: {\n  ...\n  imagemin: [ 'svg', 'jpg', 'png', 'gif' ] // support for 4 types\n},\n```\nThe [imagemin](https://github.com/sindresorhus/gulp-imagemin) plugin is used for compression, for each type, you can specify your optimization settings, the default will be as follows:\n\n```js\n// app/config.js\n\noptimization: {\n\n  jpg: {\n    progressive: true,\n    arithmetic: false,\n  },\n\n  png: {\n    optimizationLevel: 5, // may 0-7\n    bitDepthReduction: true,\n    colorTypeReduction: true,\n    paletteReduction: true,\n  },\n\n  gif: {\n    optimizationLevel: 1, // may 1-3\n    interlaced: true\n  },\n\n  // For svg, you need to specify an array with settings!\n  svg: [\n    { cleanupIDs: false },\n    { removeViewBox: false },\n    { mergePaths: false },\n  ],\n\n  // Here you can specify the names (without extensions) that do not need to be optimized.\n  ignore: []\n\n},\n```\nMore information about each type of compression settings can be found in the docs:\n* gif - [gifsicle](https://github.com/imagemin/imagemin-gifsicle#api)\n* jpg - [jpegtran](https://github.com/imagemin/imagemin-jpegtran#api)\n* png - [optipng](https://github.com/imagemin/imagemin-optipng#api)\n* svg - [svgo](https://github.com/svg/svgo#what-it-can-do)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Fast make blocks and files from terminal\nIf for some reason the [automatic creation of files and blocks](#automatic-creation-of-files-and-blocks) does not fit, then you can quickly create blocks and files from the terminal with a simple command `npm run add`.\n\n\u003e If any files and folders already exist, they will simply be ignored.\n\u003e When using the zsh command shell, you need to escape the square brackets or take the command in quotes!\n\nCreate a block **header** and **footer** with additional files:\n```bash\nnpm run add header[.css,.js] footer[.pug]\n```\n\u003e **Result:**  \nA \"header\" folder will be created  \nA \"header/header.css\" file will be created  \nA \"header/header.js\" file will be created  \nA \"footer\" folder will be created  \nA \"footer/footer.pug\" file will be created\n\nYou can create elements and modifiers:\n```bash\nnpm run add header__logo[.css,.js] footer__inner[.styl] footer_home[.styl]\n```\n\u003e **Result:**  \nA \"header\" folder will be created  \nA \"header/header__logo.css\" file will be created  \nA \"header/header__logo.js\" file will be created  \nA \"footer\" folder will be created  \nA \"footer/footer__inner.styl\" file will be created  \nA \"footer/footer_home.styl\" file will be created\n\nYou can also create folders inside the block:\n```bash\nnpm run add card[img/sprite,assets,.pug,deps.js]\n```\n\u003e **Result:**  \nA \"card\" folder will be created  \nA \"card/img\" folder will be created  \nA \"card/img/sprite\" folder will be created  \nA \"card/assets\" folder will be created  \nA \"card/card.pug\" file will be created  \nA \"card/deps.js\" file will be created\n\nBy default, all blocks are created at the main level (see property **mainLevel** in [config.js](#apps-config)), but you can specify the level directly through the colon:\n\n```bash\nnpm run add card[.js,.scss] :common\n```\n\u003e **Result:**  \nA \"common\" folder will be created (level)  \nA \"common/card\" folder will be created  \nA \"common/card/card.js\" file will be created  \nA \"common/card/card.scss\" file will be created \n\nYou can also quickly create pages, for this you need to specify the keyword **page** after add:\n```bash\nnpm run add page index catalog about.html\n```\n\u003e **Result:**  \nA \"pages\" folder will be created  \nA \"pages/index.pug\" file will be created *  \nA \"pages/catalog.pug\" file will be created *  \nA \"pages/about.html\" file will be created  \n\\------  \n\\* If the page extension is not specified, it will be taken from config.js\n\nIf you don't want to list files and folders every time, you can create blanks in [config.js](#apps-config)\n```js\n// app/config.js\n\nfastMake: {\n  b: ['.js','.css','.pug','img']\n}\n```\nNow quite well:\n```bash\nnpm run add header[b]\n```\n\u003e **Result:**  \nA \"header\" folder will be created  \nA \"header/header.js\" file will be created  \nA \"header/header.css\" file will be created  \nA \"header/header.pug\" file will be created  \nA \"header/img\" folder will be created  \n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Default content in new files\nWhen creating files [automatically](#automatic-creation-of-files-and-blocks) or [by hand](#fast-make-blocks-and-files-from-terminal), its may contain default content, for this you need to add settings in [config.js](#apps-config)\n\n```js\n// app/config.js\n\naddContent: {\n  page: 'I make [name] page.', // [name] will be replaced by the page name\n  css: '.[name] {}', // [name] will be replaced with the name of the css file\n}\n```\nNow when creating a CSS file `npm run add header[.css]` its contents will be:\n```css\n.header {}\n```\nBy analogy, you can add content for any new files.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Bundles\nFor each page, you can compile scripts and styles separately, for this you need to add settings to [config.js](#apps-config):\n```js\n// app/config.js\n\nbuild: {\n  ...\n  bundles: [ 'css', 'js' ],\n  ...\n}\n```\nNow for each page will be compiled its own CSS and JS.\n\u003e In development mode, no bundles are created, only in production build!\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Remove unused blocks\n\nYou can quickly clean your development structure and remove only those blocks that are not used on the pages.\n* The block will be deleted completely (block folder with all its contents).\n* At elements and modifiers will be deleted styles, scripts and template.\n\n\u003e Blocks will be removed from all levels at once!\n\nRun:\n```bash\nnpm run clean\n```\nYou can also protect certain blocks and they will not be deleted by this command, just specify these blocks in [config.js](#apps-config): \n\n```js\n// app/config.js\n\ncleanProtect: [ 'title' ], // The \"title\" block with elements and modifiers are now protected.\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Add task\nYou need to add a new JS file to the tasks folder with minimal functionality:\n```js\n// tasks/mytask.js\n\n'use strict'\n\nmodule.exports = {\n  name: 'mytask',\n  run ( done ) {\n    console.log( 'Go!' )\n    return done()\n  },\n}\n```\n\u003e Each task must contain a name and a run function, which should return a callback or, for example, stream, more about this can be found [here](https://gulpjs.com/docs/en/getting-started/async-completion).\n\n#### Now you can run it:\n```bash\nnpm run task mytask\n```\n\u003e **Result:**  \nGo!\n\nEverything works, now you can include the task in the main build, the property **build** is responsible for this, which contains the execution number:\n\n```js\n// tasks/mytask.js\n\n'use strict'\n\nmodule.exports = {\n  name: 'mytask',\n  build: 5, // the task will run under № 5 **\n  run ( done ) {\n    console.log( 'Go!' )\n    return done()\n  },\n}\n```\n\u003e \\** Several tasks may have the same number, in this case they will be executed in parallel\n\nThe main build has the following order:\n```\n0. [ del ]\n1. [ compile:templates ]\n2. [ generate:symbol, compile:styles, compile:scripts, generate:favicons, copy:assets ]\n3. [ copy:fonts, copy:imgs, inject:data ]\n4. [ browserSync:watch, minify:images ]\n\n5. [ mytask ] // our new task will be run last\n```\n\u003e Important! The order of default tasks is better not to change.\n\nA task can also contain a watch function, which should return an object with settings for watch:\n```js\nwatch () {\n  return {\n    files: '**/**/*.md', // globs\n    tasks: 'mytask', // task name or an array of names to run\n  }\n},\n```\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# FAQ\n\n#### And where to store global files?\n* To store some global files, you can use a root block, such as a **page** or **app**, you probably will have one.\n\n#### How to add a file in the production, regardless of whether it has in code or not?\n* Easy, just add a special @always key to the file before the extension, for example man\u003cspan\u003e\u003c/span\u003e@always.png, this will work for any static files.\n\n#### Can I use Vue or React here?\n* Probably, but why? This builder solves other problems; it is better to use special tools when developing the SPA, for example, the Create React App or the Vue CLI.\n\n### Found a bug or have a question?\n* You can [create an issue](https://github.com/werty1001/bemgo/issues/new) or write me directly in the telegram [@werty1001](https://telegram.me/werty1001).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#navigation\"\u003e\u003cimg align=\"center\" src=\"https://werty1001.github.io/sep.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Changelog\n\n### 1.0.0\n* Rewritten almost all code\n* Updated all plugins\n* Removed webpack\n* Removed FTP deploy\n* Added dependency system for blocks\n* Added automatic insert of scripts and styles on pages based on dependencies\n* Added detailed description in Russian and English\n\n### 0.1.0\n* beta version\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerty1001%2Fbemgo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwerty1001%2Fbemgo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerty1001%2Fbemgo/lists"}