awinogradov / generator-bem-ng

Yeoman generator for AngularJS applications on BEM methodology

generator-bem-ng

This README also available in russian.

Awesome Yeoman generator for your AngularJS flowered bem-projects. Wow!

You can

• make pretty bem-project structure: yo bem-ng
• create AngularJS modules: yo bem-ng:module users
• develop you bem-project with Gulp (take instruction from console): gulp
• distribute project with Gulp: gulp build
• get it now: npm install -g generator-bem-ng

Paradigm

AngularJS modules is BEM blocks. Controllers, routes, services, directives and etc. is BEM elements. Elements required in modules by *.deps.js file.

Levels usage:

• common.blocks - use for override blocks from connected libraries
• service.blocks - use for new blocks on this service
• application.blocks - use for AngularJS modules only
• server.blocks - use for NodeJS server modules

Put all your CSS design to:

• design/common.blocks - override libraries styles
• design/service.blocks - only this service styles

module example:

application.blocks
    users
        __controllers
            _index
                users__controllers_index.js
                users__controllers_index.en.md
                users__controllers_index.ru.md
            _signin
                users__controllers_singin.js
            _signup
                users__controllers_singup.js
        __directives
            _awesome
                users__directives_awesome.js
        __factories
        __services
        __routes
            users__routes.js
        users.js
        users.en.md
        users.ru.md
        users.deps.js

Technologies

• BEMHTML
• Stylus
• AngularJS

You can override them with bem-tools techs in .bem/levels/*.js files and also you can write you custom tech in .bem/levels/techs/*.js.

Dependencies

Project contain bem-core and bem-ng libs. bem-core was developed by guys from Yandex.

Authors

• Anton Winogradov (verybigman)

Ideas

Please, talk about your ideas by GitHub issues.

MIT License

Think better. Stay BEMed!

generator-bem-ng's Issues

Add Readme template for generated projects

Bad borschik js concat if bundles for no one page in Grunfile

Now work fine with bundles for one page, but this is bad. For repeat this bug set 2 or more pages in top of Gruntfile.

Default techs from project.json

Default techs: js, css, bemhtml, md.
md langs also get from project.json
Also insert techs to Gruntfile

Project not visible in yeoman community generators

Add sprites generation to Grunt

Переменные окружения

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

export YENV=production
export XJST_ASYNCIFY=yes
export BEM_MAKE_NO_COLORS=yes
export BEM_MAKE_VERBOSITY=error

хотя, если они переопределяются то это не важно.

Add tests

Integrate with bem-mvc and Ember

проблемка с созданием нового блока

$ sudo npm i verybigman/generator-bem -g
$ mkdir project && cd $_
$ yo bem && yo bem:init
$ bem make
$ bem create -l blocks -b test
Error: Tech module with path '/home/ilyar/project/libs/bem-core/.bem/techs/browser.js.js' not found on require search paths

$ node -v && npm -v && yo -v && bem -v
v0.10.26
1.4.3
1.1.2
0.7.8

проблема в файле .bem/levels/blocks.js:

var PATH = require('path'),
    environ = require('bem-environ'),
    join = PATH.join,

решается в сгенерированном проекте так:

var PATH = require('path'),
-    environ = require('bem-environ'),
+    environ = require('bem-environ')({ libDir: 'Значение из project.json:libDir' })
    join = PATH.join,

В проекте есть шаблон только для init/templates/_bundles.js, вероятно ..bem/levels/blocks.js берется как есть из project-stub, поэтому не понятно что пулреквестить.

Refacroring for using bem-ng library

Add prompts for assets directory. Be or not to be.

If not, images will be near block files.

Setup 'use strict' in init.js only

Add livereload and watcher task for gulp

Use browser-sync for pretty development

Add humans.txt for projects

Work with borschik by API

This solve #14

Add ENB make

Add environments for fast development

Merge with Yandex generator-stub

Include methods from generator-bem-stub

Edit Gruntfile

Edit Grunfile for distribute project. Use borschik freeze for static. Optimize js, css, images.

Create levels with BEM API

Now structure for blocks and levels copied from templates directory. Read about API here

Build ng-views in app/**/views directory

And rename templates directory to views.

Error Running "exec:mkdirs" (exec) task in windows

npm install -g yo generator-bem 
mkdir test_bem_gen && cd $_
yo bem
grunt

...

Running "exec:mkdirs" (exec) task
>> �訡�� � ᨭ⠪���� �������.
>> Exited with code: 1.
Warning: Task "exec:mkdirs" failed. Use --force to continue.

Aborted due to warnings.

Update to new structure

bem-protein by example
update to bem-core 2.0.0
update to new bem-components
use bem-techs and delete techs from .bem/techs
use gulp for create dist only
add to readme info about development with bem-server
add bem-tools-autoprefixer

Refactor examples with bem-components

Create prompts for include examples from bem-example

Files for editing: app/templates/app.bundles/.bem/level.js and app/index.js

Add work with merged bundle

Write BundlesLevelNode in make.js and name for merged bundle to project.json

Add js tutorials with examples

Get from here

Add prompts for make project structure after install all

Add combine media-queries to Grunt

Add contributing info with github-flow instructions

Add sub generator for work with JS MVC

Maybe get it from angularjs Yeoman generator

Create directories with fs

Solve #14

Clone project-stub with git

Now project-stub structure located in the templates folder. And copied during execution generator. Bad way.

не изменяются путь на JS/CSS в dist/*.html

после выполнения сборки, путь на стили и скрипты остается прежним:

...
  <!--[if gt IE 9]><!-->
  <link rel="stylesheet" href="_index.css"/>
  <!--<![endif]--><!--[if gte IE 6]>
  <link rel="stylesheet" href="_index.ie.css"/><![endif]-->
...
<script src="_index.js"></script>
...

remove bem-techs dependency

Add Gulp task for distribution

Вопрос о base

Release 1.0.0 😹 cool!

Я не понял назначение base и именно в ней описывается уровень *.blocks/base/.bem из этого следует что блоки создаются в ней bem create -l desktop.blocks/base -b myblock, какой work flow ты предполагаешь?

Add concurent task for static

csscomb, image min, css min, js min and other

Add livereload or browserSync on merged bundle files updates

Make docs with bem-sets

Automatic documentation system

Painless plugins and libraries connection with Bower

Migrate to new project-stub (bt-1.0.0)

Watch it here project-stub. New project-stub use Bower for managing libs(like bem-core and bem-components) and now directory .bem not need on the levels.

Add libs directory on common.blocks level

Use this level for connecting with vendors

Remove bem-protein dependecy

Work with array bundles in init and Gruntfile

Now is one level only

Add ASCII BEM brand to console log near Yeoman hello

Super light templating in Gruntfile

Remove chaos in 'exec' section.

Add bem-grid library

Will be cut from bem-protein

Integrate with Less

Add prompt for select pre-proccessor: less, stylus.
Add tech to make.js, levels/*.js, Gruntfile

Remove node server and use dev from Gulp