前端开发:工具和流程
在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/SassCompass*是一个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来触发格式化的动作。
3. Guard + LiveReload
Guard是一个命令行工具,可以检测到本地文件的修改,并且可以触发一些命令。例如,当HTML文件修改时,我们希望浏览器能够自动刷新,或者当scss文件修改时,我们希望能够自动触发Compass进行一次修改。Guard的监控规则通过Guardfile来定义,例如:
guard livereload do watch(index.html) watch(%r{stylesheets/.+\.(css)}) watch(%r{scripts/.+\.(js)}) 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 设计与构建网站 设计中的设计 原研哉2023年了,来试试前端格式化工具 eslint 使用eslint的生态链来规范开发者对js/ts基本语法的规范。防止团队的成员乱写. 这里主要使用到的eslint的包有以下几个: 使用的以下语句来按照依赖: 接下来需要对eslint的
一个简易的前端业务工具库【tj-jstools】 前端业务工具库:使用TypeScript编写有关js数据类型、浏览器信息、浏览器存储、url、字符串、数值、数组、对象等相关操作,让业务逻辑简单化。
相关文章
- spring注解解析流程_深入理解Kafka
- 第五章·自动化运维工具-Ansible流程控制
- Java如何卸载?怎么删掉Windows计算机上的Java?Java卸载流程详解!
- 没有一个顺手的流程绘制工具?好吧,自己动手,丰衣足食!
- Android setContentView流程[通俗易懂]
- Win系统安装部署流程与工具
- bindservice startservice_函数调用流程
- 【git】日常工作流程
- 如何从0到1建立和规范测试流程?
- TVP干货 | SaaS工具助力企业内容全流程数智化
- 泰山众筹系统!区块链泰山众筹DAPP模式系统开发流程逻辑分析详情
- 2023爱分析·流程挖掘市场厂商评估报告:容智信息
- 【愚公系列】2023年02月 .NET CORE工具案例-Workflow-Core轻量级工作流引擎(随机流程)
- Route加载流程
- 7步学会在Windows下上架iOS APP流程
- 【Android 逆向】逆向修改游戏应用 ( APK 解析工具 | 解包 -> 分析 -> 重打包 -> 签名 流程 )
- 量化交易机器人开发功能和流程
- 关于创建一个对象的流程以及代码块和属性位置相关详解编程语言
- 使用Linux脚本if语句流程掌握对语句的控制(linux脚本if语句)
- 你需要知道的 DevSecOps 流程及工具