2

到目前为止，我看到的所有教程都描述了如何创建单页站点或仅几个捆绑包。这是一个简单的网站导航示例：

  • 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 这样的静态文件托管上。它也应该是一个老式的静态网站，而不是单页 ajax 网站。

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

4

1 回答 1

5

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

首先，您需要克隆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/

此命令创建 file 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”一章。

要获得具有正确图像路径的最终 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
                }
            }
        ]
    }

它应该工作！

欢迎任何问题！

于 2013-12-15T13:30:14.027 回答