如何用BEM构建一个完全静态的多页面网站？

Question

到目前为止,我见过的所有教程都描述了如何创建单页网站或仅创建几个包.这是一个简单的网站导航示例:

• example.com/home
• example.com/about
• example.com/services
  • example.com/services/marketing
  • example.com/services/development
• example.com/contact

有可能用bem-tools,bemjson,bemhtml构建这样一个站点,但是没有像node.js或php这样的服务器端技术吗？

构建应该只包含一个目录,每个页面包含最终的.html,.css,.js文件和图像,并且应该托管在像Amazon S3这样的静态文件上.它也应该是一个oldschool静态网站,而不是单页的ajax网站.

是否有任何易于使用的解决方案用于此用例,还是应该创建自己的构建过程来从捆绑目录中收集文件？

Answer 1

好问题,答案是 - 是的,你可以:)

首先,您需要克隆project-stubrepo并安装依赖项:

git clone git@github.com:bem/project-stub.git
cd project-stub
npm i
./node_modules/.bin/bem make libs

现在,您已使用bem-tools配置项目存根以开发站点.

页面index包含在内.

我们来创建页面about:

./node_modules/.bin/bem create -b about -l desktop.bundles/

此命令创建文件desktop.bundles/about/about.bemjson,该文件以BEM术语表示您的页面.

您可以在运行时看到此页面

./node_modules/.bin/bem server

并http://localhost:8080/desktop.bundles/about/about.html在浏览器中打开.

阅读更多:http://bem.info/libs/bem-core/1.0.0/bemhtml/reference/,"输入数据:BEMJSON"一章.

要获得具有rigth图像路径的最终css,您需要安装cssrb包:

sudo npm i cssrb -g

要获得最终的构建目录,您需要将bem-static-build.sh文件放在项目的根目录中并运行它:

 wget https://raw.github.com/alexbaumgertner/bem-static-build/master/bem-static-build.sh
 sh  bem-static-build.sh

构建器进程结束后,您可以在desktop.bundles/merged/build文件夹中找到静态站点:

注意:如果您的页面上有内容图像,则必须将它们放入desktop.bundles/merged/img文件夹并对所有页面文件夹进行符号链接:

ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/index/img
ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/about/img

等所有页面.需要执行此操作,因为bem server显示相对于其文件夹的页面,使用符号链接,您可以src在about.bemjson中写入图像,所有页面都是这样的:

    {
        block: 'user',
        content: [
            {
                elem: 'avatar',
                tag: 'img',
                attrs: {
                    src: 'img/dypsilon.png' // relative way
                }
            }
        ]
    }

它应该工作!

欢迎任何问题!