На самом деле эта статья – описание попытки создания темы для wordpress по методологии Яндекса – БЭМ. И да – команда Яндекса проводила презентацию как раз на эту тему (создание темы для WordPress на БЭМ) – но как таковая тема в рамках презентации создана не была. Попробую всё-таки её создать.Также опишу и подготовку инструментария на MS Windows 2008 для работы с БЭМ.

Методология произвела впечатление, надо сказать. О том, что же такое БЭМ, лучше всего почитать статью от разработчиков.

Однако все примеры – на базе не MS ОС. Посему опишу в этой статье подготовку инструментария БЭМ на MS Windows 2008 R2.

Ресурсы БЭМ

Установка инструментария БЭМ

За основу возьмём информацию из нецензурного сценария установки инструментария БЭМ. Но попробуем изложить его без использования продуктов третьих фирм (речь о самом сценарии установки и подготовки окружения), обойдёмся PowerShell.

В исходном сценарии предполагалось использование wget. Но в PowerShell 2 мы получили возможность использования BITS, что полностью исключает необходимость использования wget.

Приведу сценарий, который найдёт актуальную версию Node.JS, скачает и установит её вместе с менеджером пакетов:

$ErrorActionPreference = 'Stop';

# ImportSystemModules;
Import-Module BitsTransfer # -force;
Write-Progress -Activity 'Importing modules...' -Completed -Status 'All done.';

# качаем node.js и устанавливаем его

Write-Progress -Activity 'Установка BEM инструментов' -Status 'Определение версии NodeJS...';
$wc = new-object System.Net.WebClient;
$wc.Proxy = [System.Net.GlobalProxySelection]::GetEmptyWebProxy();
$nodeJSLatestVersionURL = 'http://nodejs.org/dist';
$page = $wc.DownloadString( $nodeJSLatestVersionURL );

Write-Progress -Activity 'Установка BEM инструментов' -Status 'Анализ ответа сайта';
$lastVersion = `
    ( [regex]'href="v(?<version>(?:\d+\.){1,3}\d+)/"' ).matches( $page ) `
    | % {
        ($_.Groups['version'].Captures[0].Value);
    } `
    | sort-object `
        -property `
            @{ expression = {[Version]$_}; descending = $true; } `
    | select-object -first 1 `
;            

$nodeJSfile = "node-v$($lastVersion).msi";
$nodeJSurl = "$nodeJSLatestVersionURL/v$($lastVersion)/x64/$($nodeJSfile)";

Write-Progress -Activity 'Установка BEM инструментов' -Status "Обнаружена версия NodeJS $($matches['version']), загружаем...";
Start-BitsTransfer `
    -Source $nodeJSurl `
    -ProxyUsage 'NoProxy' `
    -Priority 'Foreground' `
    -Destination "$($env:temp)\" `
;

Write-Progress -Activity 'Установка BEM инструментов' -Status "Устанавливаем Node.JS...";
Start-Process `
    -FilePath 'msiexec.exe' `
    -ArgumentList '/i', "`"$($env:temp)\$($nodeJSfile)`"", '/quiet' `
    -Wait `
;

$nodeJSdir = "$($env:ProgramFiles) (x86)\nodejs";

Write-Progress -Activity 'Установка BEM инструментов' -Status "Устанавливаем BEM-tools...";
# Если вы планируете использовать `bem` вместе с библиотекой блоков
# [bem-bl](https://github.com/bem/bem-bl), установите также
# [xjst](https://github.com/veged/xjst) и
# [ometajs](https://github.com/veged/ometajs).
Start-Process `
    -FilePath "$nodeJSdir\npm" `
    -ArgumentList '-g', 'install', 'bem', 'xjst', 'ometajs' `
    -Wait `
;

Write-Progress -Activity 'Установка BEM инструментов' -Completed -Status "BEM инструменты установлены.";

Как видно, пришлось сначала сделать запрос, чтобы определить последнюю версию, а затем – закачиваем .msi дистрибутив через BITS. Использую именно .msi дистрибутив для того, чтобы установить сразу и node.js, и менеджер пакетов к нему (npm), и целый ряд пакетов.

Последним вызовом менеджера пакетов (npm) мы как раз и устанавливаем BEM и то, что необходимо для эксплуатации BEM-tools.

На сегодня – всё. Завтра приступлю к сборке тестового проекта на BEM.

Корректировки

Приведённый выше код вполне корректный. Однако… Насколько я понял после долгих разборок, bem tools не поддерживает доступной на сегодняшний день версии nodejs, пришлось качать конкретную версию:

$ErrorActionPreference = 'Stop';

# ImportSystemModules;
Import-Module BitsTransfer # -force;
Write-Progress -Activity 'Importing modules...' -Completed -Status 'All done.';

# качаем node.js и устанавливаем его

Write-Progress -Activity 'Установка BEM инструментов' -Status 'Определение версии NodeJS...';
$nodeJSLatestVersionURL = 'http://nodejs.org/dist';
$lastVersion = '0.6.6';
$nodeJSfile = "node-v$($lastVersion).msi";
# $nodeJSurl = "$nodeJSLatestVersionURL/v$($lastVersion)/x64/$($nodeJSfile)";
$nodeJSurl = "$nodeJSLatestVersionURL/v$($lastVersion)/$($nodeJSfile)";

Write-Progress -Activity 'Установка BEM инструментов' -Status "Обнаружена версия NodeJS $($lastVersion), загружаем...";
Start-BitsTransfer `
    -Source $nodeJSurl `
    -ProxyUsage 'NoProxy' `
    -Priority 'Foreground' `
    -Destination "$($env:temp)\" `
;

Write-Progress -Activity 'Установка BEM инструментов' -Status "Устанавливаем Node.JS...";
Start-Process `
    -FilePath 'msiexec.exe' `
    -ArgumentList '/i', "`"$($env:temp)\$($nodeJSfile)`"", '/quiet' `
    -Wait `
;

$nodeJSdir = "$($env:ProgramFiles) (x86)\nodejs";

Write-Progress -Activity 'Установка BEM инструментов' -Status "Устанавливаем BEM-tools...";
# Если вы планируете использовать `bem` вместе с библиотекой блоков
# [bem-bl](https://github.com/bem/bem-bl), установите также
# [xjst](https://github.com/veged/xjst) и
# [ometajs](https://github.com/veged/ometajs).
Start-Process `
    -FilePath "$nodeJSdir\npm" `
    -ArgumentList '-g', 'install', 'bem', 'xjst', 'ometajs' `
    -Wait `
;

Write-Progress -Activity 'Установка BEM инструментов' -Completed -Status "BEM инструменты установлены.";

На версии 0.6.6 всё корректно работает.

Ещё из некоторых неудобств. По умолчанию менеджер пакетов (npm) установит все модули (включая bem) в Ваш перемещаемый профиль. Если Вам необходимо иное местоположение – правьте файл C:\Program Files (x86)\nodejs\node_modules\npm\npmrc:

;prefix=${APPDATA}\npm
prefix=${ProgramFiles(x86)}\nodejs

Можете указать и иное местоположение. На этом пока всё.

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка