做一个聪明的前端开发者

那么什么是聪明者,就是打架不出拳,直接用刀砍,或者更牛逼的就开枪!

那么如何做一个聪明的前端开发者?

很显然,就是用工具代替手工,用自动代替手动!

那到底是用什么工具呢,如下:

前端开发工具

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

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

git,http://git-scm.com/

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

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,可以指定名字和版本让它来帮你下载,它依赖gitgithub下载,至于它从哪里怎么下载你就不用关心了。
安装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.jsondevDependencies结点通过bower install重新下载依赖,

直接运行grunt命令执行所有grunt任务。

本文重在抛砖引玉,更多的用法大家去挖掘,或自行参考各自的官方文档。

做一个聪明的前端开发者,布布扣,bubuko.com

时间: 07-07

做一个聪明的前端开发者的相关文章

如何做一个好的前端重构工程师

编者注:这里的"重构"指的是将设计图(比如PSD)转换为html + css + js. 用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构? 其实,"好"与"坏"向来都是相对的,因为每个人眼中看待"好"与"坏"的标准不一样,不如从自身的角度考虑一下:如何做一个好重构? 先来看一个平时我们遇到的最多的两栏布局: 基本的html代码: 来看具体的CSS代码实现(忽略margin): 很明显在

做一个合格的前端,gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

做一个有效率的安卓开发者

本次主要介绍下android开发中一些比较有趣的提高开发效率的工具: 1.png压缩 https://tinypng.com/ 2.当你厌烦android开发中一大堆findviewById时候,你应该抛弃这些繁琐的工作做一个有效率的开发者,将更多的时间用于学习或者解决多次的繁复工作.目前有两大利刃:butterfly和layoutfinder. butterfly:请自行谷歌,主要是利用注入方式引入,因此有注入本身自带的缺点,但是代码绝对优雅. layoutfinder:根据xml自动生成fi

起始!努力做一个强大的前端开发!

学习前端半年多了,发现自己越来越喜欢前端这个行业,喜欢制作特效的页面,喜欢研究一些炫酷的代码.小时候就幻想着以后能够从事it方面的工作,但事与愿违,不过随着年龄的增长,越来越觉得做一份自己喜欢的事有多么的重要,所以年初的我毅然而然的辞去了当前的工作,决定去做一件自己喜欢的事情,24岁!这将是我的一个新的起点!无论未来的路有多么坎坷我都会坚持下去.博客园!希望通过你让我接触的一些喜欢前端的小伙伴,一起加油!一起探讨! 原文地址:https://www.cnblogs.com/Mr-cao-vue/

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 (三)我的工具页面布局 如图: 首先将其分为二部分: 第一部分是上方整体红色方框区域: 包含若干个独立按钮,按钮

前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 前端的小玩意(9.3)--做一个仿360工具箱的web页面(我的工具里的模板和样式) http://blog.c

前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 前端的小玩意(9.3)--做一个仿360工具箱的web页面(我的工具里的模板和样式) http://blog.c

web前端课程技术内容之如何做一个简单的手机端页面的翻页

[如何做一个简单的手机端页面的翻页] 第一步:创建移动端页面内 HTML + CSS [注]可用弹性布局 但需要注意的是 外层盒子的定位 第二步: 思考问题 要实现怎样的效果? 1. 手指滑动时触发事件[左右]两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步:编写JS代码 添加监听事件 document.addEventListener('DOMContentLoaded',function(){ 创建一个数组用于调用数组属性值 或者