WordPress и БЭМ: пробуем писать тему. Шаг 1: устанавливаем инструментарий БЭМ на Windows 2008 R2
На самом деле эта статья – описание попытки создания темы для wordpress по методологии Яндекса – БЭМ. И да – команда Яндекса проводила презентацию как раз на эту тему (создание темы для WordPress на БЭМ) – но как таковая тема в рамках презентации создана не была. Попробую всё-таки её создать.Также опишу и подготовку инструментария на MS Windows 2008 для работы с БЭМ.
Методология произвела впечатление, надо сказать. О том, что же такое БЭМ, лучше всего почитать статью от разработчиков.
Однако все примеры – на базе не MS ОС. Посему опишу в этой статье подготовку инструментария БЭМ на MS Windows 2008 R2.
Ресурсы БЭМ
- https://github.com/bem
- основные понятия шаблонизатора BEMHTML
- не совсем “цензурный” сценарий установки инструментария БЭМ
Установка инструментария БЭМ
За основу возьмём информацию из нецензурного сценария установки инструментария БЭМ. Но попробуем изложить его без использования продуктов третьих фирм (речь о самом сценарии установки и подготовки окружения), обойдёмся 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
Можете указать и иное местоположение. На этом пока всё.
RSS комментарии
Обратная ссылка