前端开发：工具和流程
在dailyReport项目中，我通过SpringBoot + Mongodb + Redis构建了后端RESTful接口，现在需要客户端展现了，但是我的web和移动开发都是初学者，只能从头学起。
在谷歌上浏览资料过程中，偶然遇到ThoughtWorks的这篇文章： 我们真的缺前端工程师么？ 认真读下来，首先佩服文中作者的学习能力，然后欣赏ThoughtWorks这种以feature为单位的团队组建方式。文章的核心观点在于：我们不是缺前端工程师，我们是缺优秀的前端工程师。
我再激进一点，我的观点是：我们不是缺前端工程师，我们是缺优秀的具备匠心的工程师。原文引用了《肖申克的救赎》中的一段话来说明环境对人的限制和塑造，我也放在这里，提醒我的读者：不要轻易给自己设限。
These walls are kind of funny like that. First you hate them, then you get used to them.Enough time passed, get so you depend on them. That’s institutionalising. 我在阅读上文的时候，文中提到《3周3页面》这本电子书，于是我在selfstore上买来看了，本文的内容算是我的读书笔记。我们今天的主题是：当下前端开发的工具以及开发流程。
开发工具
1. Compass/Sass
Compass*是一个Sass到Css的预编译工具，它还包括一些使用了Sass的库，将很多样式打包成一些模块，可以在自己的项目中使用这些模块。
Sass是一个CSS3的扩展语言，提供了丰富的特性使得编写样式更容易（呵呵，CSS的基础知识还是得学，设定的曲线平缓一点，慢慢来）。sass提供几个主要功能来改进css的代码结构：可嵌套、变量定义、可扩展、可导入和mixin等。
2. Sublime编辑器
Sublime是一个非常好用、非常现代的编辑器，据说是专业的前端都用它（Atom默默地瞪了我一眼）。
- Package Control，装上Sublime之后，首先安装Package Control这个包管理工具，用于安装其他的插件。
- Emmet，是一个快速生成HTML片段的工具，它支持很多编辑器，包括Sublime、Textmate、Notepad++等。它的用法可以描述如下，写出表达式
section>h2+p*3,光标在末尾的时候单击tab键，就会生成如下html代码。使用Emmet可以极大减少体力活的时间（不过HTML5的基础还是要学，再说一次，零基础的同学不要给自己的学习曲线设得太陡）。
<section> <h2></h2> <p></p> <p></p> <p></p> </section> -
HTML + CSS + JS Prettify，用于格式化HTML、CSS以及JavaScript文件的插件。在Mac上，通过快捷键Command + Shift + H来触发格式化的动作。
-
GitGutter，一个用来在Sublime增强Git效果的插件，可以实时看到当前文件的修改状态。
3. Guard + LiveReload
Guard是一个命令行工具，可以检测到本地文件的修改，并且可以触发一些命令。例如，当HTML文件修改时，我们希望浏览器能够自动刷新，或者当scss文件修改时，我们希望能够自动触发Compass进行一次修改。Guard的监控规则通过Guardfile来定义，例如：
guard 'livereload' do watch('index.html') watch(%r{stylesheets/.+/.(css)}) watch(%r{scripts/.+/.(js)}) end guard: compass LiveReload是一个浏览器插件，它可以跟后台的guard服务通信：当guard检测到页面有改动时，则会通知该插件，然后该插件会自动刷新页面。
4. 静态服务器
只要你的机器上安装了Python，就会有一个简单的http服务器，启动命令是： python -m SimpleHTTPServer 9999
5. 模板工程
模板工程的github地址是： web模板工程 ，读者朋友可以直接使用。
开发流程
启动两个终端，一个启动guard，另一个启动景台服务器；然后启动浏览器。假设你已经在浏览器中安装了Livereload，并单击LiveReload图标，那么在guard后台会出现“Browser connected”字样，就说明guard服务和Livereload插件已经建立连接了。
参考资料
- 3周3页面
- HTML & CSS 设计与构建网站
- 设计中的设计 原研哉
欢迎大家扫码关注微信公众号：我是攻城师，我们一起学习，进步和交流!（duqi_Voice）本公众号的内容是IT技术（Java、虚拟化、大数据但是不限于此），健身心得和生活感悟，也是一个温馨的技术互动交流的小家园，有什么问题随时都可以留言，欢迎大家来访！ ： 
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
