Skip to content

gulp-bem/gulp-enb-shim

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##gulp-enb-shim

Use your old enb techs with gulp-bem

Note #1: this shim supports only tech created with build-flow but most of your techs are likely to be created with build-flow

Note #2: yes, the usage is too verbose. But why the hell it shouldnt be?

Note #3: many techs relates to other targets. While enb handles this dependencies by itself, in this shim i suggest explicit providing tech dependencies. Example:

var i18nKeysetsAll = enbBundleShim.tech(techs['i18n-keysets'], { lang: 'all' });
var i18nLangAll = enbBundleShim.tech(techs['i18n-lang'], { lang: 'all' }, {
    sources: {
        '?.keysets.all.js': i18nKeysetsAll
    }
});

Note #4: therefore build-flow has helpers for reading related target's source, many techs read them from fs manually. This shim cannot automatically detect such behaviour, so when providing tech deps point that the deps should be already on fs. Example:

var i18nKeysetsAll = enbBundleShim.tech(techs['i18n-keysets'], { lang: 'all' });
var i18nLangAll = enbBundleShim.tech(techs['i18n-lang'], { lang: 'all' }, {
    sources: {
        '?.keysets.all.js': {
            fromFs: true,
            file: i18nKeysetsAll
        }
    }
});

###Example:

function buildBundle(bundlePath) {
    // `gulp-bem` bundle instance
    var bemBundle = bemProject.bundle({
        path: path.relative(process.cwd(), bundlePath),
        decl: path.basename(bundlePath) + '.bemdecl.js'
    });

    // create shim instance
    var enbBundleShim = gulpEnbShim({
        bundle: bemBundle,
        langs: langs,
        cwd: process.cwd()
    });
    // here we will store all targets
    var targets = [];

    // lets create bemhtml file with depsByTech as we do it normally in `enb-make`
    var bemhtml = enbBundleShim.tech(techs.bemhtml, { target: '?.client.bemhtml.js', devMode: true }, {
        depsByTech: 'js'
    });
    // and js also
    var clientJs = enbBundleShim.tech(techs.js, { target: '?.client.js' });
    // now lets merge them and then it will become our target
    var js = es.merge([bemhtml, clientJs])
        .pipe(concat(bemBundle.name() + '.js'))
        .pipe(gulp.dest(bemBundle.path()));

    // simple css build
    var css = enbBundleShim.tech(techs.css, {
            target: '?.css',
        })
        .pipe(gulp.dest(bemBundle.path()));

    // IE css stuff
    var cssIE6 = enbBundleShim.tech(techs.css, { sourceSuffixes: ['css', 'ie.css', 'ie6.css'], target: '?.ie6.css' })
        .pipe(gulp.dest(bemBundle.path()));
    var cssIE7 = enbBundleShim.tech(techs.css, { sourceSuffixes: ['css', 'ie.css', 'ie7.css'], target: '?.ie7.css' })
        .pipe(gulp.dest(bemBundle.path()));
    var cssIE8 = enbBundleShim.tech(techs.css, { sourceSuffixes: ['css', 'ie.css', 'ie8.css'], target: '?.ie8.css' })
        .pipe(gulp.dest(bemBundle.path()));
    var cssIE9 = enbBundleShim.tech(techs.css, { sourceSuffixes: ['css', 'ie9.css'], target: '?.ie9.css' })
       .pipe(gulp.dest(bemBundle.path()));

    // ok, this is priv file wich we want to localize
    var priv = enbBundleShim.tech(techs.priv, { mode: 'development' });
    // we need BEM.I18N core
    var i18nKeysetsAll = enbBundleShim.tech(techs['i18n-keysets'], { lang: 'all' });
    // process it with another tech
    // note, this tech thought that its dependency (previous file) is already on fs
    // so we cheat and tell shim to write file on fs before execute this tech
    var i18nLangAll = enbBundleShim.tech(techs['i18n-lang'], { lang: 'all' }, {
        sources: {
            '?.keysets.all.js': {
                fromFs: true,
                file: i18nKeysetsAll
            }
        }
    });
    // now localize for all our langs
    langs.forEach(function(lang) {
        // as previously, we need lang strings
        var i18nKeysetsLang = enbBundleShim.tech(techs['i18n-keysets'], { lang: lang });
        // then process them
        // giving previous file from fs
        var i18nLangLangSources = {};
        i18nLangLangSources['?.keysets.' + lang + '.js'] = {
            fromFs: true,
            file: i18nKeysetsLang
        }
        var i18nLangLang = enbBundleShim.tech(techs['i18n-lang'], { lang: lang }, {
            sources: i18nLangLangSources
        });
        // and finally merge all three pieces together
        var privI18NSources = {};
        privI18NSources['?.lang.all.js'] = { fromFs: true, file: i18nLangAll.pipe(clone()) };
        privI18NSources['?.lang.' + lang + '.js'] = { fromFs: true, file: i18nLangLang };
        privI18NSources['?.priv.js'] = { fromFs: true, file: priv.pipe(clone()) };
        var privI18N = enbBundleShim.tech(techs['i18n-priv'], { lang: lang }, {
            sources: privI18NSources
        })
        .pipe(gulp.dest(bemBundle.path()));
        targets.push(privI18N);
    });

    targets = targets.concat([js, css, cssIE6, cssIE7, cssIE8, cssIE9]);

    return es.merge(targets);
}

For complete example see example-gulpfile.js

About

Use your old `enb` techs with `gulp-bem`

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published