grunt-bemaker

grunt-bemaker

Grunt-плагин для сборки БЭМ-проекта с помощью bemaker

Приступая к работе

Если вы не использовали Grunt раньше, то можете ознакомиться с вступительной инструкцией, в которой объясняется, как добавить Gruntfile в проект.

Установить этот плагин можно следующей командой:

npm install grunt-bemaker

После установки, можно будет подключить плагин в вашем Gruntfile:

grunt.loadNpmTasks('grunt-bemaker');

Использование

Для запуска сборки проекта, достаточно выполнить команду: grunt bemaker.

Сборка осуществляется с помощью bemaker.

Опции

Опция directories

Тип: string[]

Обязательный

Опция указывает расположение директорий с блоками.

Сборщик ничего не соберёт без указания расположения блоков.

Следующий пример задаёт сборку блоков из директорий common и phone:

{
    directories: ['common', 'phone']
}

Опция outname

Тип: string

Опция указывает имя сохраняемых файлов.

По умолчанию файлы сохраняются без имени, только с расширением.

Следующий пример задаёт сохраняемым файлам имя all:

{
    outname: 'all'
}

Опция outdir

Тип: string

Опция указывает директорию для сохраняемых файлов.

По умолчанию файлы сохраняются в текущую директорию.

Следующий пример задаёт директорию bundle для сохраняемых файлов:

{
    outdir: 'bundle'
}

Опция extensions

Тип: string[]

Опция указывает расширения для сохраняемых файлов.

По умолчанию сохраняются все найденные расширения.

Следующий пример задаёт к сохранению расширения .js и .css:

{
    extensions: ['.js', '.css']
}

Опция blocks

Тип: string[]

Опция указывает имена блоков, которые необходимо собрать.

По умолчанию в сборку включаются все найденные блоки.

Следующий пример задаёт к сборке только блоки button и input:

{
    blocks: ['button', 'input']
}

Опция dependext

Тип: string

Опция указывает расширение файлов, в которых сборщику следует искать зависимости блоков.

По умолчанию поиск зависимостей осуществляется в файлах с расширением .js.

Следующий пример задаёт поиск зависимостей в файлах .deps.js:

{
    dependext: '.deps.js'
}

Опция jsdoctag

Тип: string

Опция указывает имя JSDoc-тега, в котором сборщику следует читать зависимости блоков.

По умолчанию чтение зависимостей осуществляется в теге @bemaker.

Следующий пример задаёт чтение зависимостей в теге @deps:

{
    jsdoctag: 'deps'
}

Опции before и after

Тип: boolean|Function

Опции отменяют или изменяют комментарий перед и после содержимого каждого файла.

По умолчанию в собранном файле перед содержимым каждого файла устанавливается такого вида комментарий:

/* before: blocks/button/button.css */

Следующий пример отменяет установку этого комментария:

{
    before: false
}

Для изменения комментария можно указать функцию, которая должна возвращать строку и принимает следующие параметры:

• {string} absPath Абсолютный путь до файла
• {string} relPath Относительный путь до файла
• {string} extname Полное расширение файла (например для file.ie.css будет .ie.css)
• {number} index Индекс файла
• {number} length Количество файлов

Пример изменения комментария:

{
    before: function(absPath, relPath,  extname, index, length) {
        return '/* custom before: ' + absPath + ' */\n';
    }
}