设为首页 收藏本站
查看: 635|回复: 0

[经验分享] 做一个聪明的前端开发者

[复制链接]

尚未签到

发表于 2017-2-23 11:32:03 | 显示全部楼层 |阅读模式
  那么什么是聪明者,就是打架不出拳,直接用刀砍,或者更牛逼的就开枪!
  那么如何做一个聪明的前端开发者?
  很显然,就是用工具代替手工,用自动代替手动!
  那到底是用什么工具呢,如下:

前端开发工具
  工具有点多,但是都非常简单,或许你已经安装并使用过一些了。


  • git,版本控制系统
  • node,JS运行平台
  • npm,node的包管理
  • yo,脚手架
  • grunt,项目构建工具
  • bower,项目依赖包管理

git,http://git-scm.com/
  据说是一款很厉害的版本控制系统,类似SVN,不过本人还没有所领悟,继续SVN中,只是下面的工具要到用git所以简单说一下。
下载安装即可,安装完成后顺便试一下cmd中git命令是否可以识别。

node,http://nodejs.org/
  这是个好东西,降低了应该程序开发的门槛,JS不只在浏览器上运行了,还可以开发本地应用程序,就靠它来运行,有点类似于JVM,牛逼的工具一时间如雨后春笋般冒了出来!
下面说到的的工具都是用node开发的本地应用程序
安装就非常简单了,下载后添加bin目录到系统Path路径即可。

npm,https://www.npmjs.org/
  说到这个的时候我有点激动,也不知道从什么时候开始,在我们项目中用到的第三方依赖不用自己苦逼的在网络上到处找了。只要指定版本号和依赖名字它就可以帮你下载。
这个就更厉害在了,它不仅可以帮你安装依赖包,还可以安装基于node开发的软件,真的是泪流满面呀!
安装同样简单,下载后添加bin目录到系统Path路径即可,下载地址:http://nodejs.org/dist/npm/
常用功能就是安装(npm install -g 名字)和更新(npm update -g 名字)了,-g表示可以全局运行,其实就是帮你把安装路径添加到系统的Path路径中。其它用法的看官网吧。

yo,http://yeoman.io/
  什么是脚手架,百度百科是这样解释的,指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架,看到这里你应该大概明白了,
yo在这里充当的角色就是帮你直接生成项目的部分内容,免去你的重复无聊的工作,比如创建目录构建、新建各种配置文件。
安装:npm install -g yo

grunt,http://gruntjs.com/
  构建工具,一句话解释,把你指定的内容转换成你想的目标内容,这就是构建。比如把less转换成css,压缩js或css等。
安装:npm install -g grunt-cli

bower,http://bower.io/
  这个就更强了,类似java界的maven包管理功能,简单的说就是帮你下载项目依赖的内容,
比如你用到的jquery,可以指定名字和版本让它来帮你下载,它依赖git从github下载,至于它从哪里怎么下载你就不用关心了。
安装:npm install -g bower
  工具介绍完了,下面说说如何让这些东西帮你拉磨

创建示例项目
  工具安装了一大堆,那如何帮我们效力呢,也很简单的。
  从yo开始,前面说过了,它可以帮你创建项目的基础架构,比如创建一个基于jquery的前端项目:
打开cmd,执行以下代码:

mkdir yotest
npm install -g generator-jquery
yo jquery
  按照提示输入你的项目名称,版本(4位,如1.0.0),作者等信息,然后就等着收货吧。
  对上面的命令解释一下,generator-jquery这个东西是yo提供的一种预先建立好的项目原型,
通过命令npm install -g generator-jquery把它安装你到本地仓库,最后通过yo jquery来随时创建新的基于jquery的项目,与maven十分相似。
  项目原型存放于官方仓库,可以通过http://yeoman.io/generators/official.html这个去检索,还有一个是社区仓库http://yeoman.io/generators/community.html。
  当然你可自己创建项目原型,请参考http://yeoman.io/authoring/,或许我下一篇会说到吧。
  主要会帮你创建一个合理的项目目录结构,并生成主要的几个配置文件包括package.json(npm依赖包配置)、Gruntfile.js(grunt配置)、bower.json(bower依赖包配置)等。
  如果你修改了package.json中的devDependencies结点,通过npm install重新下载依赖,这部分依赖主要给grunt使用,
  修改了bower.json的devDependencies结点通过bower install重新下载依赖,
  直接运行grunt命令执行所有grunt任务。
  本文重在抛砖引玉,更多的用法大家去挖掘,或自行参考各自的官方文档。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346186-1-1.html 上篇帖子: 自从用了Less 编写css,你比以前更快了~ 下篇帖子: Ganiks推荐软件工具和Web工具集[持续更新]
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表