{"action":"created","issue":{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/782","repository_url":"https://api.github.com/repos/bem/bem-forum-content-ru","labels_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/782/labels{/name}","comments_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/782/comments","events_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/782/events","html_url":"https://github.com/bem/bem-forum-content-ru/issues/782","id":123895508,"number":782,"title":"Хакатон: сборка с помощью gulp","user":{"login":"blond","id":2225579,"avatar_url":"https://avatars.githubusercontent.com/u/2225579?v=3","gravatar_id":"","url":"https://api.github.com/users/blond","html_url":"https://github.com/blond","followers_url":"https://api.github.com/users/blond/followers","following_url":"https://api.github.com/users/blond/following{/other_user}","gists_url":"https://api.github.com/users/blond/gists{/gist_id}","starred_url":"https://api.github.com/users/blond/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blond/subscriptions","organizations_url":"https://api.github.com/users/blond/orgs","repos_url":"https://api.github.com/users/blond/repos","events_url":"https://api.github.com/users/blond/events{/privacy}","received_events_url":"https://api.github.com/users/blond/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/events","name":"events","color":"fef2c0"},{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/hackaton","name":"hackaton","color":"fef2c0"},{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/news","name":"news","color":"fef2c0"},{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/project-stub","name":"project-stub","color":"bfe5bf"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-12-25T19:24:02Z","updated_at":"2016-04-04T08:19:17Z","closed_at":null,"body":"Привет, пришла и моя очередь рассказать о содеянном на [минувшем хакатоне](https://ru.bem.info/forum/715/).\r\n\r\nОсновная мысль, которая преследует меня уже долгое время — возможность сборки БЭМ-проектов с помощью **любого** инструмента. И именно с этой идеей я пришёл в то раннее утро субботы агитировать собравшихся присоединиться ко мне, в надежде немного приблизить неизбежное будущее, в котором нет `ENB`.\r\n\r\nНесмотря на невнятную речь, ко мне присоединились очень крутые ребята, без которых мы бы не продвинулись так далеко: @arikon, @zxqfox, @awinogradov, спасибо вам огромное!\r\n\r\nСтавь задачу правильно\r\n--------------------------\r\n\r\nУтверждение «сборка БЭМ-проектов с помощью **любого** инструмента» звучит слишком абстрактно. \r\n\r\nВ двухдневный формат хакатона такая задача совсем не укладывалась. Надо было сформулировать что-то более конкретное. Поэтому мы решили, что критерием успеха будет сборка [project-stub](https://ru.bem.info/tutorials/project-stub/) с помощью `gulp`. \r\n\r\nСам `gulp` был выбран практически случайно. Важно было доказать гипотезу о сборке с помощью любого инструмента. На эту роль `gulp` подходит как нельзя лучше: он популярен, прост, да и ребята из соседней команды уже решили делать [сборку с помощью webpack](https://ru.bem.info/forum/774/).\r\n\r\nГотовь сани летом\r\n--------------------\r\n\r\nНа самом деле основная работа была сделана заранее. \r\n\r\nСпецифика сборки БЭМ проектов заключается в организации уровней переопределения и использовании зависимостей блоков. Подробнее об этом можно [почитать на bem.info](https://ru.bem.info/method/build/).\r\n\r\nНеобходимость модульной сборки была сформулирована уже давно. На [прошлогоднем хакатоне](https://ru.bem.info/forum/-671/) мы решили задачу интроспекции уровней — [bem-walk](https://github.com/bem/bem-walk/).\r\n\r\nКроме того, к этому хакатону я написал прототип модуля для работы с зависимостями блоков — [bem-deps](https://github.com/bem-incubator/bem-deps).\r\n\r\nРабота оказалась проделанной не зря. Модуль для работы с зависимостями пригодился не только нам, но и команде, занимающейся сборкой с помощью `webpack`. А интроспекция и вовсе оказалась нужна каждой команде.\r\n\r\nРезультаты\r\n------------\r\n\r\n**Проект**: [@bem/gulp](https://github.com/gulp-bem/gulp-bem).\r\n\r\n**Сборка `project-stub`**: ветка [feature/gulp](https://github.com/bem/project-stub/tree/feature/gulp)\r\n\r\nНичто не опишет проект лучше, чем его API. Поэтому без слов пример того, что у нас получилось.\r\n\r\n```js\r\nimport gulp from 'gulp';\r\nimport bem from '@bem/gulp';\r\nimport concat from 'gulp-concat';\r\nimport merge from 'gulp-merge';\r\nimport bemhtml from 'gulp-bemhtml';\r\nimport stylus from 'gulp-stylus';\r\nimport postcss from 'gulp-postcss';\r\nimport postcssUrl from 'postcss-url';\r\n\r\n// Создаём хелпер для сборки проекта\r\nvar project = bem({\r\n    bemconfig: {\r\n        /* загружаем информацию об уровнях с помощью `bem-config` */ \r\n    }\r\n});\r\n\r\n// Создаём хелпер для сборки бандла\r\nvar bundle = project.bundle({\r\n    path: 'desktop.bundles/index',\r\n    declPath: 'index.bemdecl.js'\r\n});\r\n\r\ngulp.task('css', function () {\r\n    return bundle.src({tech: 'css', extensions: ['.css', '.styl']})\r\n        .pipe(stylus())            \r\n        .pipe(postcss([\r\n            postcssUrl({ url: 'inline' })            \r\n        ]))\r\n        .pipe(concat(`${bundle.name()}.css`))\r\n        .pipe(gulp.dest('desktop.bundles/index'));\r\n});\r\n\r\ngulp.task('js', function () {\r\n    return\r\n        merge(\r\n            gulp.src(require.resolve('ym')),\r\n            bundle.src({ tech: 'js', extensions: ['.js', '.vanilla.js', '.browser.js'] })\r\n        )\r\n        .pipe(concat(`${bundle.name()}.js`))\r\n        .pipe(gulp.dest('desktop.bundles/index'));\r\n});\r\n\r\ngulp.task('bemhtml', function () {\r\n    return bundle.src({ tech: 'bemhtml.js', extensions: ['.bemhtml.js', '.bemhtml'] })\r\n        .pipe(concat(`${bundle.name()}.bemhtml.js`))            \r\n        .pipe(bemhtml())\r\n        .pipe(gulp.dest('desktop.bundles/index'));\r\n});\r\n\r\ngulp.task('build', gulp.series('css', 'js', 'bemhtml'));\r\ngulp.task('default', gulp.series('build'));   \r\n```\r\n\r\nПо скорости в текущем состоянии сборка `project-stub` оказалась соизмеримой со сборкой на стеке ENB.\r\n\r\nЧто дальше?\r\n-------------\r\n\r\nВначале мы приведём код в человеческий вид, покроем тестами и напишем примеры использования с минимальной документацией.\r\n\r\nМы уже получили массу пожеланий и предложений, которые обязательно учтём.\r\n\r\nКак только всё будет готово, обязательно расскажем вам. А самое главное — будем внедрять в реальные проекты и реагировать на фидбэк.\r\n\r\nОбщие модули `bem-walk` и `bem-deps` оказались универсальными, и в каком-то смысле уже проверенными в бою. Поэтому, кроме использования их для сборки на `gulp` и `webpack`, мы планируем внедрить их в ENB.\r\n\r\nДальше можно будет исходить из потребностей, оптимизировать работу для больших проектов и реализовывать дополнительные плагины, которых будет не хватать.\r\n\r\nПрисылайте свои идеи и задавайте вопросы на форуме или в ишьюсах к репозиториям из организации [gulp-bem](https://github.com/gulp-bem).\r\n\r\nСпасибо за внимание!"},"comment":{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/comments/205186998","html_url":"https://github.com/bem/bem-forum-content-ru/issues/782#issuecomment-205186998","issue_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/782","id":205186998,"user":{"login":"tadatuta","id":475746,"avatar_url":"https://avatars.githubusercontent.com/u/475746?v=3","gravatar_id":"","url":"https://api.github.com/users/tadatuta","html_url":"https://github.com/tadatuta","followers_url":"https://api.github.com/users/tadatuta/followers","following_url":"https://api.github.com/users/tadatuta/following{/other_user}","gists_url":"https://api.github.com/users/tadatuta/gists{/gist_id}","starred_url":"https://api.github.com/users/tadatuta/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tadatuta/subscriptions","organizations_url":"https://api.github.com/users/tadatuta/orgs","repos_url":"https://api.github.com/users/tadatuta/repos","events_url":"https://api.github.com/users/tadatuta/events{/privacy}","received_events_url":"https://api.github.com/users/tadatuta/received_events","type":"User","site_admin":false},"created_at":"2016-04-04T08:19:17Z","updated_at":"2016-04-04T08:19:17Z","body":"@cyberS7 да, в ветке https://github.com/bem/project-stub/tree/preparing-for-master обновление этой истории. планируем вскоре влить ее в основную ветку, но уже сейчас можно пользоваться."}}