├── .bowerrc ├── .editorconfig ├── .gitignore ├── .jshintrc ├── .npmignore ├── README.md ├── blocks ├── logo │ ├── __bem │ │ └── logo__bem.css │ ├── __gulp │ │ └── logo__gulp.css │ ├── logo.css │ └── logo.deps.js ├── menu │ ├── __item │ │ └── menu__item.css │ ├── menu.css │ └── menu.deps.js ├── page │ └── page.deps.js └── tagline │ └── tagline.css ├── bower.json ├── gulpfile.js ├── package.json └── pages └── index └── page ├── page.bemjson.js ├── page.css └── page.deps.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "libs", 3 | "shorthand_resolver": "git://github.com/{{owner}}/{{package}}.git" 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [*.json] 16 | indent_size = 2 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | libs 3 | .DS_Store 4 | static/libs 5 | node_modules 6 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 4, 10 | "latedef": false, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": false, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "white": true 21 | } 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | img 2 | test 3 | .travis.yml 4 | .jshintrc 5 | .editorconfig 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp-bem-stub 2 | 3 | This project contains example [gulpfile.js](https://github.com/matmuchrapna/gulp-bem-stub/blob/master/gulpfile.js) to help you start using [bem](http://getbem.com) with [gulp](https://github.com/gulpjs/gulp). 4 | 5 | ## Usage 6 | 7 | To start developing project on BEM with preconfigured gulpfile do this in your console: 8 | 9 | ```bash 10 | git clone https://github.com/matmuchrapna/gulp-bem-stub.git project 11 | cd project 12 | npm i 13 | gulp build 14 | ``` 15 | 16 | It will clone the stub into `project` directory and build example index page in `dist` directory. 17 | 18 | ## License 19 | 20 | MIT (c) 2014 Vladimir Starkov 21 | -------------------------------------------------------------------------------- /blocks/logo/__bem/logo__bem.css: -------------------------------------------------------------------------------- 1 | .logo__bem 2 | { 3 | width: 50%; 4 | margin-right: -97px; 5 | margin-top: 13px; 6 | } 7 | -------------------------------------------------------------------------------- /blocks/logo/__gulp/logo__gulp.css: -------------------------------------------------------------------------------- 1 | .logo__gulp 2 | { 3 | position: relative; 4 | 5 | width: auto; 6 | height: 210px; 7 | } 8 | -------------------------------------------------------------------------------- /blocks/logo/logo.css: -------------------------------------------------------------------------------- 1 | .logo 2 | { 3 | width: 500px; 4 | text-align: center; 5 | margin: 0px auto; 6 | } 7 | -------------------------------------------------------------------------------- /blocks/logo/logo.deps.js: -------------------------------------------------------------------------------- 1 | module.exports.expect = [ 2 | { elems: ['gulp', 'bem']} 3 | ]; 4 | -------------------------------------------------------------------------------- /blocks/menu/__item/menu__item.css: -------------------------------------------------------------------------------- 1 | .menu__item 2 | { 3 | display: inline-block; 4 | padding: 0 10px; 5 | } 6 | -------------------------------------------------------------------------------- /blocks/menu/menu.css: -------------------------------------------------------------------------------- 1 | .menu 2 | { 3 | padding: 1em; 4 | text-align: center; 5 | } 6 | -------------------------------------------------------------------------------- /blocks/menu/menu.deps.js: -------------------------------------------------------------------------------- 1 | module.exports.expect = [ 2 | { elems: ['item'] } 3 | ]; 4 | -------------------------------------------------------------------------------- /blocks/page/page.deps.js: -------------------------------------------------------------------------------- 1 | module.exports.expect = [ 2 | { elems: ['head', 'title', 'body'] }, 3 | { block: 'meta' }, 4 | { block: 'metalink' }, 5 | 6 | { block: 'js' }, 7 | { block: 'css' }, 8 | { block: 'link' }, 9 | { block: 'image' }, 10 | 11 | { block: 'grid' }, 12 | { block: 'heading' }, 13 | { block: 'normalize' } 14 | ]; 15 | -------------------------------------------------------------------------------- /blocks/tagline/tagline.css: -------------------------------------------------------------------------------- 1 | .tagline 2 | { 3 | font-size: 26px; 4 | line-height: 40px; 5 | 6 | width: 500px; 7 | margin: 0 auto; 8 | margin-top: 50px; 9 | 10 | text-align: center; 11 | } 12 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-bem-stub", 3 | "version": "0.0.0", 4 | "description": "gulp BEM stub", 5 | "bugs": "https://github.com/matmuchrapna/gulp-bem-stub/issues", 6 | "ignore": [ 7 | ".bem/cache", 8 | "node_modules", 9 | "libs" 10 | ], 11 | "dependencies": { 12 | "base": "matmuchrapna/bem-base", 13 | "bootstrap": "bem-bootstrap#v0.1.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var bem = require('gulp-bem'); 3 | var bh = require('gulp-bh'); 4 | var concat = require('gulp-concat'); 5 | var del = require('del'); 6 | var debug = require('gulp-bem-debug'); 7 | var argv = require('yargs').alias('d', 'debug').boolean('d').argv; 8 | var buildBranch = require('buildbranch'); 9 | 10 | var deps; 11 | var levels = [ 12 | 'libs/base', 13 | 'libs/bootstrap/levels/normalize', 14 | 'libs/bootstrap/levels/print', 15 | 'libs/bootstrap/levels/glyphicons', 16 | 'libs/bootstrap/levels/scaffolding', 17 | 'libs/bootstrap/levels/core', 18 | 'blocks', 19 | 'pages/index' 20 | ]; 21 | 22 | gulp.task('deps', function (done) { 23 | var tree = bem.objects(levels) 24 | .pipe(bem.deps()) 25 | .pipe(bem.tree()); 26 | 27 | deps = tree.deps('pages/index/page'); 28 | 29 | if (argv.debug) { deps.pipe(debug()); } 30 | 31 | done(); 32 | }); 33 | 34 | gulp.task('css', ['deps', 'clean'], function () { 35 | return deps.src('{bem}.css') 36 | .pipe(concat('index.css')) 37 | .pipe(gulp.dest('./dist')); 38 | }); 39 | 40 | gulp.task('html', ['deps', 'clean'], function () { 41 | delete require.cache[require.resolve('./pages/index/page/page.bemjson.js')]; 42 | return deps.src('{bem}.bh.js') 43 | .pipe(bh(require('./pages/index/page/page.bemjson.js'), 'index.html')) 44 | .pipe(gulp.dest('./dist')); 45 | }); 46 | 47 | gulp.task('build', ['clean', 'html', 'css']); 48 | 49 | gulp.task('clean', function (cb) { 50 | del(['./dist'], cb); 51 | }); 52 | 53 | gulp.task('watch', ['build'], function() { 54 | return gulp.watch([ 55 | '{blocks,pages}/**/*.css', 56 | '{blocks,pages}/**/*.deps.js', 57 | '{blocks,pages}/**/*.bh.js', 58 | '{blocks,pages}/**/*.bemjson.js' 59 | ], ['build']); 60 | }); 61 | 62 | gulp.task('gh', ['build'], function(done) { 63 | buildBranch({ folder: 'dist', ignore: ['libs'] }, done); 64 | }); 65 | 66 | gulp.task('default', ['watch']); 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-bem-stub", 3 | "version": "0.0.0", 4 | "description": "gulp BEM project stub", 5 | "main": "index.js", 6 | "scripts": { 7 | "postinstall": "bower i", 8 | "build": "gulp", 9 | "watch": "gulp watch" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git@github.com:matmuchrapna/gulp-bem-stub.git" 14 | }, 15 | "keywords": [ 16 | "gulp", 17 | "bem" 18 | ], 19 | "author": "Vladimir Starkov", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/matmuchrapna/gulp-bem-stub/issues" 23 | }, 24 | "homepage": "https://github.com/matmuchrapna/gulp-bem-stub", 25 | "dependencies": { 26 | "bower": "^1.3.9", 27 | "del": "^0.1.2", 28 | "gulp": "^3.8.6", 29 | "gulp-concat": "^2.3.4", 30 | "yargs": "^1.3.1", 31 | "gulp-bem-debug": "^0.2.0", 32 | "gulp-bem": "^0.5.0", 33 | "gulp-bh": "^0.1.0", 34 | "buildbranch": "^0.0.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /pages/index/page/page.bemjson.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | block: 'page', 3 | content: [ 4 | { 5 | elem: 'head', 6 | content: [ 7 | { block: 'meta', attrs: { charset: 'utf-8' }}, 8 | { block: 'meta', attrs: { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }}, 9 | { 10 | elem: 'title', 11 | content: 'Gulp BEM is awesome!', 12 | }, 13 | { block: 'meta', attrs: { name: 'keywords', content: '' }}, 14 | { block: 'meta', attrs: { name: 'description', content: '' }}, 15 | 16 | { block: 'metalink', url: '/favicon.ico', attrs: { rel: 'icon', type: 'image/x-icon' }}, 17 | { block: 'metalink', url: '/favicon.ico', attrs: { rel: 'shortcut icon', type: 'image/x-icon' }}, 18 | 19 | { block: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' }}, 20 | { block: 'css', url: 'index.css' } 21 | ] 22 | }, 23 | { 24 | elem: 'body', 25 | content: { 26 | block: 'grid', 27 | content: [ 28 | { 29 | elem: 'row', 30 | content: [ 31 | { 32 | elem: 'cell-xs', 33 | mods: { size: 12 }, 34 | content: { 35 | block: 'heading', 36 | mods: { level: 1 }, 37 | mix: [{ block: 'tagline' }], 38 | content: 'Welcome to gulp-bem-stub!' 39 | } 40 | }, 41 | { 42 | elem: 'cell-xs', 43 | mods: { size: 12 }, 44 | content: { 45 | block: 'logo', 46 | content: [ 47 | { 48 | block: 'image', 49 | mix: [{ block: 'logo', elem: 'bem' }], 50 | url: 'http://getbem.com/img/b.svg' 51 | }, 52 | { 53 | block: 'image', 54 | mix: [{ block: 'logo', elem: 'gulp' }], 55 | url: 'https://raw2.github.com/gulpjs/artwork/master/gulp-2x.png' 56 | } 57 | ] 58 | } 59 | }, 60 | { 61 | elem: 'cell-xs', 62 | mods: { size: 12 }, 63 | content: { 64 | block: 'heading', 65 | mods: { level: 2 }, 66 | mix: [{ block: 'tagline' }], 67 | content: 'What happens when two powerful technologies meet each other? Awesomness!' 68 | } 69 | } 70 | ] 71 | } 72 | ] 73 | } 74 | } 75 | ] 76 | }; 77 | -------------------------------------------------------------------------------- /pages/index/page/page.css: -------------------------------------------------------------------------------- 1 | .page { 2 | color: white; 3 | background-color: #101010; 4 | } 5 | -------------------------------------------------------------------------------- /pages/index/page/page.deps.js: -------------------------------------------------------------------------------- 1 | module.exports.expect = [ 2 | { block: 'logo' }, 3 | { block: 'tagline' }, 4 | { block: 'menu' }, 5 | ]; 6 | --------------------------------------------------------------------------------