移动端Web开发工具小汇之一微生物

下周于京都放了一致员生牛的里边分享,回来整理了一晃光景现在运动端web开发的工具流。以下文字为主仍然copy官方表明。
//部分才是本人的增补。一切工具与工作流都是环绕【产品】→【设计】→【前端】→【测试】→【交付】这多少个类别循环举办的。

图片1.png

GitHub.png

GitHub
存放使用Git版本控制的软件代码和情节项目。除了允许个人及公司创立与做客代码库以外,它呢供了一部分便民社会化软件开发的效能,包括允许用户跟踪其他用户、社团、软件库底动态,对软件代码的变更和
bug
指出评论顶。GitHub也供了图片效能,用于显示开发者们怎么样在代码库上干活暨软件之开销活跃程度。
//那个不赘述了。

smacss.com.png

SMACSS(Scalable & Modular Architecture for
CSS),其利害攸关原则来3漫漫:Categorizing CSS Rules(为css分类)
• Naming Rules(命名规则)
• Minimizing the Depth of Applicability(最小化适配深度)
微生物,SMACSS认为css有5个类别,分别是:
• Base (基本)
• Layout(布局)
• Module (模块)
• State (状态)
• Theme (主题)

图片3.png

参照文档:https://nicolas.steinmetz.fr/web-enthusiasts/post/2013/06/05/Atomic-design
http://bradfrost.com/blog/post/atomic-web-design/
http://www.slideshare.net/bradfrostweb/atomic-design?ref=http%253A%252F%252Fbradfrost.com%252Fblog%252Fpost%252Fatomic-web-design%252F

Atomic_m.jpg

//Atomic工作流优化和立异了设计师面对页面时的视觉,创作不再是一个个图层,而是遵从原子→分子→生物→模板→网页的构架格局一步步拓展的。

yeomanjs.org.png

Yeoman是Google的团伙和外部进献者团队合作开发的,目的是啊开发者创制一个易用的工作流。
Yeoman重要出三片段构成:yo(脚手架工具)、grunt(构建工具)、bower(包管理器)。那三单器是分别独立开发的,可是需要般配使用,来实现我们急迅的工作流形式。
• Yo
搭建筑新利用之下边手架,编写而的Grunt配置并且安装你生或以构建中需的连锁的Grunt任务。
• Grunt
被用来构建,预览以及测试你的色,感谢来自这一个由于Yeoman团队与grunt-contrib所管理之职责之帮。
• Bower 被用来举行看重管理,所以您不再要手动的下载和管制而的脚本了。
//有些有,比如Grunt现在总的来说已经过时或者无适应低度碎片化的移位端web开发了,但工具控提出至少用它度过你办事成长期的一个号。

gruntjs.com.png

http://gruntjs.com/
http://www.gruntjs.org/
Grunt是一个自动化的型构建工具,假设急需重新的实施像压缩、编译、单元测试,代码检查以及包装发表的任务.
那么你得行使Grunt来处理这几个任务,
你所需要举办的只是布好Grunt,这样能相当非常程度的简化工作。

smacss.com.png

Bower
因nodejs的模块化思想,把效益疏散到各类模块中,让模块和模块之间在关联,通过
Bower 来治本模块间的这种沟通。
担保管理工具一般生以下的力量:
• 注册机制:每个包得规定一个唯一的 ID
使得搜索与下载的当儿能对匹配,所以管管理工具需要维护注册消息,可以凭借其他平台。

文件存储:确定文件存放的职位,下载的时节可找到,当然这地方在网及是只是看的。
• 上传下载:这是工具的要功能,能增强保险用的便利性。比如想就此 jquery
只需要 install
一下即便可以了,不用到处寻找下充斥。上传并无是必备之,依据文件存储的职位而定,但需发出自然的体制保障。

依赖分析:这吗是保管理工具首要解决之问题有,既然包之间是生关系的,那么下载的当儿即使待处理他们之间的负。下载一个保的时呢待下载倚重之管。

相关文章