前端开发:工具和流程

在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插件已经建立连接了。

参考资料

  1. 3周3页面
  2. HTML & CSS 设计与构建网站
  3. 设计中的设计 原研哉

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Web前端性能优化教程01:减少Http请求和使用内容分发网络

性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,c...

44270
来自专栏厦门SEO

如何获得微信/QQ小绿标?腾讯云网址安全认证教程!

打开微信/QQ,聊天框发送已经完成URL安全认证的网址,看看小绿标是否生效即可~

2.3K10
来自专栏数据科学与人工智能

【Python环境】Python爬虫入门(2):爬虫基础了解

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

28390
来自专栏WeTest质量开放平台团队的专栏

Android 9 适配怎么做? “QQ音乐”优化实录

原文链接:https://wetest.qq.com/lab/view/406.html

26920
来自专栏web开发

javascript设计模式——发布订阅模式

前面的话   发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javascript开...

95060
来自专栏菩提树下的杨过

monoTouch开发(1):win7 + vmware下安装mac os

iPhone现在越来越火爆了,很多原本在PC上的互联网应用都纷纷推出了iPhone客户端(比如携程,新浪微博),iPhone的最佳开发环境是mac OS + i...

23060
来自专栏假装我会写代码

基于 Laravel 的用户动态模块开发

17230
来自专栏互联网开发者交流社区

SEO-搜索引擎高级搜索指令

18450
来自专栏FreeBuf

利用QRLJacking工具获取Whatsapp帐号权限

这篇文章将会教你如何用 QRLJacking 去获取别人 Whatsapp 帐号的权限,这种攻击是交互式,需要受害者去扫描你搭建好的钓鱼网站里面的恶意二维码,或...

22020
来自专栏carven

前端小积累

一周周实习,很少时间写博客了,但本周的实习中,遇到了一些问题,可以说是争长了阅历,所以一定要好好记下来。 遇到的问题主要是关于跨域和css3的;

9000

扫码关注云+社区

领取腾讯云代金券