Видео бебинаров по BEM (2-ой и 3-й)

Мое первое желание - использовать GUlp. Потому фраза в описании к видео Мы показали, как это делается, на примере Gulp заинтересовала. Здесь же и gulpfile.js И приблудились ссылки на Lightweight BEM plugin for jQuery и html2bl Tiny little script for getting blocks dirs from HTML file with redefinition levels.

Вебинар по БЭМ: сборка и оптимизация проекта видео beminar-2 Методология БЭМ рекомендует сохранять каждый блок в отдельный файл. Но потом их ещё нужно собрать. Мы показали, как это делается, на примере Gulp
beminar-3/gulpfile.js
html2bl Tiny little script for getting blocks dirs from HTML file with redefinition levels.
Вебинар по БЭМ: декларативный JavaScript видео beminar-3 На этот раз мы научимся писать JavaScript с использованием jQuery для наших блоков в соответствии с принципами методологии БЭМ.
В beminar-1 есть ветка beminar-2/gulpfile.js
Lightweight BEM plugin for jQuery
jQuery BEM plugin doc First of all, jQuery BEM plugin requires using a certain naming convention. jQuery BEM locates blocks and elements by analyzing class names of page's DOM nodes. So, correct class names are the key to success.

Вот это накодили на beminar-2, а лежит в beminar-3/gulpfile.js¶

In [ ]:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    path = require('path'),
    url = require('gulp-css-url-adjuster'),
    autoprefixer = require('autoprefixer-core'),
    postcss = require('gulp-postcss');

var params = {
    out: 'public/',
    htmlSrc: 'index.potter.html',
    levels: ['common.blocks', 'potter.blocks']
},
    getFileNames = require('html2bl').getFileNames(params);

gulp.task('default', ['server', 'build']);

gulp.task('build', ['html', 'css', 'images', 'js']);

gulp.task('server', function() {
    browserSync.init({
        server: params.out
    });

    gulp.watch('*.html', ['html']);

    gulp.watch(params.levels.map(function(level) {
        var cssGlob = level + '/**/*.css';
        return cssGlob;
    }), ['css']);

    gulp.watch(params.levels.map(function(level) {
        var jsGlob = level + '/**/*.js';
        return jsGlob;
    }), ['js']);

});

gulp.task('html', function() {
    gulp.src(params.htmlSrc)
    .pipe(rename('index.html'))
    .pipe(gulp.dest(params.out))
    .pipe(reload({ stream: true }));
});

gulp.task('css', function() {
    getFileNames.then(function(files) {
        return gulp.src(files.css)
            .pipe(concat('styles.css'))
            .pipe(url({
                prepend: 'images/'
            }))
            .pipe(postcss([ autoprefixer() ]))
            .pipe(gulp.dest(params.out))
            .pipe(reload({ stream: true }));
    })
    .done();
});

gulp.task('images', function() {
    getFileNames.then(function(src) {
        gulp.src(src.dirs.map(function(dirName) {
            var imgGlob = path.resolve(dirName) + '/*.{jpg,png,svg}';
            console.log(imgGlob);
            return imgGlob;
        }))
        .pipe(gulp.dest(path.join(params.out + '/images/')));
    })
    .done();
});

gulp.task('js', function() {
    getFileNames.then(function(src) {
        return src.dirs.map(function(dirName) {
            var jsGlob = path.resolve(dirName) + '/*.js';
            console.log(jsGlob);
            return jsGlob;
        });
    })
        .then(function(jsGlobs) {
            console.log(jsGlobs);
            gulp.src(jsGlobs)
                .pipe(concat('app.js'))
                .pipe(gulp.dest(params.out))
                .pipe(reload({ stream: true }));
        })
        .done();
});

html2bl Tiny little script for getting blocks dirs from HTML file with redefinition levels.¶

In [ ]:

var params = { levels: ['common.blocks', 'project.blocks'], htmlSrc: 'index.html'
},
    getFileNames = require('html2bl').getFileNames(params);

getFileNames.then(function(files) {
    // your logic here
})
.done()

In [ ]:

Вот он файлик скрипта **html2bl/index.js**

In [ ]:

var htmlparser = require("htmlparser2"),
    fs = require("fs"),
    path = require("path"),
    vow = require('vow'),
    promisify = require('vow-node').promisify,
    classes = [],
    stat = promisify(fs.stat);

/**
 * Returns unique CSS class names from html string in source file order.
 * @param {string} html
 * @returns {string[]} class names
 */
function getClasses(html) {
    var parser = new htmlparser.Parser({
        onopentag: function(name, attribs){
            if(attribs.class){
                attribs.class.split(' ').forEach(function(className) {
                    (classes.indexOf(className) === -1) && classes.push(className);
                });
            }
        },
    }, {decodeEntities: true});
    parser.write(html);
    parser.end();
    return classes;
}

/**
 * Returns file names from CSS classes with redifinition levels on fs.
 * @param {string[]} blocks
 * @param {string[]} levels
 * @returns {string[]}
 */
function getFilesFromBlocks(blocks, levels) {
    var cssFiles = [],
        blockDirs = [];

    return vow.all(levels.map(function(level) {
        return vow.allResolved(blocks.map(function(blockName) {
            var dirName = path.resolve('./' + level + '/' + blockName + '/');
            return stat(dirName).then(function (stats) {
                if (stats.isDirectory()) {
                    blockDirs.push(dirName);
                    var fileName = path.resolve(dirName + '/' + blockName + '.css');
                }
                if (fs.statSync(fileName).isFile()) {
                    cssFiles.push(fileName);
                }
                return stats;
            });
        }));
    })).then(function() {
        return { css: cssFiles, dirs: blockDirs };
    });
}

/**
 * Returns promise with block directories from html file.
 * Looking on current file tree with redifinition levels.
 * @param {Object} params
 * @param {string} params.htmlSrc html file name for parsing
 * @param {(string|string[])} params.levels — redefinition levels
 *
 */
exports.getFileNames = function(params) {
    var htmlSrc = fs.readFileSync(params.htmlSrc, 'utf8'),
        blocks = getClasses(htmlSrc);

    return getFilesFromBlocks(blocks, params.levels).then(function(files) {
        return files;
    });
};

Посты чуть ниже также могут вас заинтересовать