Giter Club home page Giter Club logo

enb-bem-techs's Introduction

ENB

NPM Status Travis Status Windows Status Coverage Status Dependency Status

The tool for building web projects created with the BEM methodology.

Introduction

The main purpose of ENB is to combine source files into bundles, usually for further use in the browser.

The build includes combining all source files, processing them and converting the code, as well as preparing and packing the resources (images, fonts, and so on).

Read more about building BEM projects on the bem.info site.

Basic features of ENB

  • Searches for only those source files needed for the build.
  • Connects the necessary source files based on dependency declarations.
  • Defines the order of connecting the source files.
  • Combines source files spread across the project's file system.
  • Creates bundles and files.
  • Extends the build for project-specific processing and conversion.
  • Provides a local development service that supports builds on demand.

Installation

$ npm install --save-dev enb

Getting started

To create a BEM project configured for the build with ENB, use one of these options:

  1. Install a project-stub template project that supports ENB builds by default.
  2. Create a project that suits your tasks. To do this, answer the questions in the BEM project generator based on Yeoman.

Documentation

Materials

Extensions

ENB technology packages are located in NPM: packages with the enb prefix.

Name Status Description
BEM methodologies
BEM NPM version Technologies for building BEM projects.
BEViS NPM version Technologies for building BEViS projects.
Templating
bem-xjst NPM version Building BEMTREE and BEMHTML templates with bem-xjst.
xjst NPM version Building BEMTREE and BEMHTML templates with XJST.
bh NPM version Building BH templates.
bt NPM version Building BT templates.
Styles
CSS NPM version Building and minimizing CSS files.
PostCSS NPM version Building and processing CSS files with postcss.
Stylus NPM version Building and minimizing Stylus files.
Saas NPM version Building Sass files.
Roole NPM version Building roo files.
JavaScript
JavaScript ![NPM version] (https://img.shields.io/npm/v/enb-js.svg) Building, processing and minimizing JS files.
YModules NPM version Building JS files with YModules.
Public facilities
Examples NPM version Building BEM examples.
Docs NPM version Building BEM documentation.
Browser tests NPM version Building and running tests for client-side JavaScript.
Node tests NPM version Building and running tests for BEM templates.
Template tests NPM version Building and running tests for BEM templates.

License

© 2013 YANDEX LLC. The code is released under the Mozilla Public License 2.0.

enb-bem-techs's People

Contributors

blond avatar egavr avatar frux avatar ilyar avatar innabelaya avatar l0stsoul avatar mikhailrojo avatar ogonkov avatar qfox avatar razetdinov avatar swinx avatar tadatuta avatar tavriaforever avatar tormozz48 avatar vithar avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

innabelaya 4exova vovieque tormozz48 incrop tavriaforever hurtsok mursya qfox vithar l0stsoul eandreyf mikhailrojo vsesh dmkoval vkhv dima117 ilyar lisbon11 pebsconsulting websoda sajidmisfit rtemision

enb-bem-techs's Issues

Rename techs

  • bemdecl-merge to merge-bemdecl
  • deps-merge to merge-deps
  • deps-subtract to subtract-deps
  • bemdecl-provider to provide-bemdecl
  • deps-provider to provide-deps

Support of relative paths for `levels` tech

Absolute paths:

nodeConfig.addTech([require('enb-bem/techs/levels'), { 
    levels: getLevels(config) 
}]);

function getLevels(config) {
    return [
        'common.blocks',
        'desktop.blocks'
    ].map(function (level) { 
        return config.resolvePath(level);
    });
}

Relative paths:

nodeConfig.addTech([require('enb-bem/techs/levels'), { 
    levels: ['common.blocks', 'desktop.blocks']
}]);

Add index module

Сейчас обычный конфиг выглядит так:

nodeConfig.addTechs([
    [require('enb-bem-techs/techs/levels'), { levels: getLevels(config) }],
    [require('enb/techs/file-provider'), { target: '?.bemjson.js' }],
    [require('enb-bem-techs/techs/bemjson-to-bemdecl')],
    [require('enb-bem-techs/techs/deps-old')],
    [require('enb-bem-techs/techs/files')],
    /* ... */
]);

В каждой строке мы подключаем модуль технологии. Помимо этого, для каждой технологии приходится писать полный путь, относительно пакета enb-bem-techs/techs/tech-name.

Чтобы избавиться от повторов, можно добавить index.js файл в корень пакета, который будет предоставлять объект из всех технологий.

var techs = require('enb-bem-techs');

nodeConfig.addTechs([
    [techs.levels, { levels: getLevels(config) }],
    [require('enb/techs/file-provider'), { target: '?.bemjson.js' }],
    [techs.bemjsonToBemdecl],
    [techs.depsOld],
    [techs.files],
    /* ... */
]);

Технологии должны быть доступны по ключам не только в CamelCase, но и в dash-delim стиле.

var bem = require('enb-bem-techs');

nodeConfig.addTechs([
    [bem['levels'], { levels: getLevels(config) }],
    [require('enb/techs/file-provider'), { target: '?.bemjson.js' }],
    bem['bemjson-to-bemdecl'],
    bem['deps-old'],
    bem['files'],
    /* ... */
]);

Custom naming for `levels` tech

How use Harry Roberts naming:

nodeConfig.addTech([require('enb-bem/techs/levels'), { 
    levels: getLevels(config) 
}]);

function getLevels(config) {
    return [{
        path: 'common.blocks',
        naming: {
            elemSeparator: '-',
            modSeparator: '--',
            literal: '[a-zA-Z0-9]'   
        }
    }].map(function (level) { 
        return config.resolvePath(level);
    });
}

Get an error when collecting examples

for example, you have an example 00-all.bemjson.js:

  1. add 00-all.blocks folder where you will add some blocks for your examples
  2. run server and collect example
  3. delete 00-all.blocks
  4. try to collect example again
    I got an error such as:
Error: ENOENT, no such file or directory '/Users/sipayrt/sites/promo/islands-promo-bc/desktop.examples/button/00-all/blocks'
    at Object.fs.readdirSync (fs.js:654:18)
    at module.exports.inherit.load (/Users/sipayrt/sites/promo/islands-promo-bc/node_modules/enb-bem-techs/lib/levels/level.js:212:28)
    at /Users/sipayrt/sites/promo/islands-promo-bc/node_modules/enb-bem-techs/techs/levels.js:126:38
    at Array.map (native)
    at /Users/sipayrt/sites/promo/islands-promo-bc/node_modules/enb-bem-techs/techs/levels.js:125:42
    at Array.3 (/Users/sipayrt/sites/promo/islands-promo-bc/node_modules/enb/node_modules/vow/lib/vow.js:202:56)
    at Object.callFns [as _onImmediate] (/Users/sipayrt/sites/promo/islands-promo-bc/node_modules/enb/node_modules/vow/lib/vow.js:462:35)
    at processImmediate [as _immediateCallback] (timers.js:330:15)

Index module should provide functions instead of techs

Сейчас конфиг пестрит обилием квадратных скобок.

var techs = require('enb-bem-techs');

nodeConfig.addTechs([
    [techs.levels, { levels: ['blocks'] }],
    [require('enb/techs/file-provider'), { target: '?.bemjson.js' }],
    [techs.bemjsonToBemdecl],
    [techs.depsOld],
    [techs.files],
    /* ... */
]);

Можно написать небольшую функцию-враппер, которая будет превращать технологию в функцию, возвращающую массив из модуля технологии и указанных опций.

var bem = require('enb-bem-techs'),
    useTech = require('enb-bem-techs/lib/use-tech'),
    provide = useTech(require('enb/techs/file-provider'));

nodeConfig.addTechs([
    bem.levels({ levels: ['blocks'] }),
    provide({ target: '?.bemjson.js' }),
    bem.bemjsonToBemdecl(),
    bem.depsOld(),
    bem.files(),
    /* ... */
]);

Для некоторых технологий можно сделать специальную обработку опций, засахарив наиболее популярные опции.

var bem = require('enb-bem-techs'),
    useTech = require('enb-bem-techs/lib/use-tech'),
    provide = useTech(require('enb/techs/file-provider'));

nodeConfig.addTechs([
    bem.levels(['blocks']),
    provide('?.bemjson.js'),
    bem.bemjsonToBemdecl(),
    bem.depsOld(),
    bem.files(),
    /* ... */
]);

Fix cache for merge techs

cache.cacheFileList should take instance of FileList instead of filename array.

  • fix merge-bemdecl
  • fix merge-deps
  • fix tests

Custom scheme for `levels` tech

Use scanner function for custom scheme of level:

nodeConfig.addTech([require('enb-bem/techs/levels'), { 
    levels: getLevels(config) 
}]);

function getLevels(config) {
    return [{
        path: 'common.blocks',
        scanner: function () {/*...*/}
    }].map(function (level) { 
        return config.resolvePath(level);
    });
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.