在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):werty1001/bemgo开源软件地址(OpenSource Url):https://github.com/werty1001/bemgo开源编程语言(OpenSource Language):JavaScript 94.9%开源软件介绍(OpenSource Introduction):Builder simplifies and accelerates the process of developing projects according to the BEM methodology, under the hood used Gulp. Features
and more :) How it worksYou write the BEM code, a structure and dependencies are formed on the basis of the pages markup. NavigationInstallDownload 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
Be careful!
Structure
App has the following file structure:
Block has flat structure and all files and folders is optional:
Usage
App's configAll 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.
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: [],
} TemplatesPug / Twig or plain HTML can be used as a template maker. // app/config.js
use: {
templates: '.pug', // Pug, I choose you!
...
}, Now the build will look for pug files. JSON data in markupEach 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>
PathwaysEach block has its own folder with assets, so you need to specify placeholder before specific file.
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 stylesThe 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 TemplateWhen 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 **
},
Advanced HTMLYou 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 markingIf you don’t like to write BEM code with your hands, then there are several plugins in the build that simplify this task.
include /node_modules/bemto.pug/bemto
+b.block
+e.element Text
include /node_modules/bempug/index
+b( 'block' )
+e( 'element' ) Text <div block="block">
<div elem="element">Text</div>
</div> // app/config.js
build: {
...
BEML: true,
}, HTML formattingYou 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. StylesAs a preprocessor for styles, you can use LESS / Sass / Stylus or use plain CSS. // 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
}, PostCSSThe following PostCSS plugins are used by default:
Additional plug-ins you can always add yourself is easy. Raster and vector spritesYou can easily build vector and raster sprites (for different screens), for this is used a wonderful PostCSS plugin.
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 retinaYou 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). VectorAt 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 symbolsIn 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:
Use SVGThere 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 TransformationIf at least one SVG icon is found in the page code, the build will look for a special sy |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论