bemtree-from-html

    1.0.9 • Public • Published

    bemtree-from-html npm version

    This module is able to find html files for a given search template, inside your project. Analyze them and build on their basis a file BEM structure for SCSS.

    Install

    npm install bemtree-from-html --save-dev
    

    Basic Usage

    Call from file:

    let bemtree = require("bemtree-from-html");
    
    bemtree({
    	from:'src/**/!(_|temp)*.html',
    	to:'src/blocks',
    	js:'src/js/blocks.js',
    	omit:'@@,js-,active,col,row'
    });

    Call from package.json:

    "scripts": {
    	"bemtree": "bemtree-from-html from=./src/**/!(_%temp)*.html to=src/blocks js=src/js/blocks.js omit=active,col,row" 
    },
    
    > npm run bemtree
    

    Note! Since the node.js console accepts the "|" as the beginning of a new command, in the "scripts:{}" section of the package.json file, when describing the search template, you must use the "%" symbol instead "|". When called inside the corresponding function, "%" will automatically be replaced with "|"


    Call from package.json, use settings object:

    "scripts": {
    	"bemtree": "bemtree-from-html" 
    },
    "bemtree": {
    	"from":"./src/**/!(_|temp)*.html",
    	"to":"src/blocks",
    	"js":"src/js/blocks.js",
    	"omit":"@@,js-,active,col,row"
    }
    
    > npm run bemtree
    

    source html:

    <div class="blockname1 blockname1_top">
    	<div class="blockname1__item blockname1__item_first"></div>
    	<div class="blockname1__item"></div>
    	<div class="blockname1__item blockname1__item_last"></div>
    </div>
    <div class="blockname1 blockname1_bottom">
    	<div class="blockname1__item blockname1__item_first"></div>
    	<div class="blockname1__item"></div>
    	<div class="blockname1__item blockname1__item_last"></div>
    </div>
    <div class="blockname2 blockname2_first" data-blockname2>
    	<div class="blockname2__item blockname2__item_first"></div>
    	<div class="blockname2__item"></div>
    	<div class="blockname2__item blockname2__item_last"></div>
    </div>

    resulting file structure:

    src
    └── blocks
    	└── blockname1
    		└── blockname1.scss
    	└── blockname2
    		├── blockname2.scss
    		└── blockname2.js
    └── js
    	└── blocks.js
    

    BEM structure inside created files:

    blockname1.scss:

    .blockname1 {
    	$self: &;
    
    	&_top {
    		
    	}
    
    	&_bottom {
    		
    	}
    
    	&__item {
    
    		&_first {
    			
    		}
    
    		&_last {
    			
    		}
    	}
    }

    blockname2.scss:

    .blockname2 {
    	$self: &;
    
    	&_first {
    		
    	}
    
    	&__item {
    
    		&_first {
    			
    		}
    
    		&_last {
    			
    		}
    	}
    }

    blockname2.js:

    (() => {
    	//your code..
    })();

    blockname2.js write import to src/js/blocks.js

    import "../blocks/blockname2/blockname2.js";

    Options

    from

    Type: string

    Where to find html files is determined by the search template for minimatch. Default value: ./src/**/*.html See examples.

    to

    Type: string

    Where to create the resulting BEM structure. Default value: src/blocks

    omit

    Type: string

    A comma-separated list of class name exceptions. If the class name begins with one of the values from this list, it will be ignored.

    use

    Type: string

    A comma-separated list of classes name prefix required to use. If it is not empty, then ONLY classes with those names will be used.

    Note! The 'omit' option, in this case, loses its meaning, but continues to be taken into account.

    js

    Type: string

    In which file to write .js-file imports for newly created BEM blocks

    cwd

    Type: string

    Current working directory. Default value: process.cwd()


    Note! It is very convenient to use it together with the gulp-sass-glob utility. This utility allows you to automatically include all scss files from the blocks folder into any target scss file. Like this:
    @import "../blocks/**/*.scss";
    Note! Now, also, a feature has been added that allows, when creating a block containing a .js file, to automatically write its import to the file specified in the settings. This file contains all the imports, then it is convenient to import it into the main .js file of the project.

    Keywords

    Install

    npm i bemtree-from-html

    DownloadsWeekly Downloads

    3

    Version

    1.0.9

    License

    ISC

    Unpacked Size

    12.5 kB

    Total Files

    3

    Last publish

    Collaborators

    • _tango