Violet

Just another Jekyll blog.

使用 Jekyll 提高 Demo 开发效率

使用 Jekyll 来提高 Demo 的开发效率?也许真有点儿可能喔。经过一个星期的实践,我感 觉还是挺方便的。今天分享下。

###Demo 开发遇到的问题

在前端开发的过程中,前期的 Demo 制作,需要依据 PRD 和视觉稿产出相应的 HTML 页面 。很多时候,由于环境的问题,使用单纯的 HTML 来编写页面,效率比较慢。或者适当地使 用 Copy And Write 的方式,也不是很灵活。

总结我个人遇到的一些妨碍效率的问题,有下面几点:

  • 头部底部只能通过 Copy & write 的方式应用到各个页面,页面多的话,需要修改很多次。不灵活。
  • 编写模板的时候,需要再从 Demo 筛选出对应的模块,重复性成本高。
  • 使用 PHP 或者其他语言进行编写 Demo,似乎小题大作了。

###如何使用 Jekyll 开发 Demo ?

恩,也许你还不知道啥是 Jekyll,没关系, PIZn.Me 就是使用 Jekyll 搭建起来的。你可以在这里找到 Jekyll 的很多相关文章。

Ok,基于平时自己遇到的一些问题,还有 Jekyll 的方便性,我尝试着这样去做页面的开发,舒服多了,效率也提上来了。

  • 本地安装 Jekyll 。
  • 新建项目文件夹,至少需要下面几个文件:
xxx项目
    |--_layouts(布局)
        |--default.html
    |--_includes(模块化)
        |--head.html
        |--foot.html
    |--css
    |--js
    |--html
    |--images
    |--_config.yml(配置文件)
  • 通过布局来配置我们的公用模块,简化每个 Demo 的工作量。
  • 通过 include 来规划组件化模块,一个页面可以看成是很多组件构建起来的。
  • 在项目文件夹运行jekyll --server
  • 待服务启动成功到浏览器访问localhost:4000/你的页面,进行测试和其他工作。

###人无完人,适合才是好的

每个人的工作方式都不一样。我个人觉得这样挺好的,必要的适合再建个项目发出来。但也有个不足,就是每次测试需要输入jekyll --server,其他的还好。

使用 Jekyll 来提高前端开发 Demo 效率,如果你觉得还不错,或者不懂,或者有新的想法,欢迎交流。