前端开发相关工具简要说明

jopen 9年前

这基本上是个人的前端开发环境配置吧。这里假设了大家都知道一些Linux的常识，也假设大家都知道Git怎么用 了。最近在做的事情是由以前自己一点一点的写前端业务的方式，转变到自己提供前端的组件和方法，然后有其他人来完整业务的方式。其实蛮羡慕那些已经做到了 技术提供工具，由运营或者业务来填充内容的团队。

操作系统

  1. 为方便开发之间相互对接调试和测试，建议使用Mac或者Linux等操作系统，不建议使用Windows操作系统。
  2. 我自己的电脑目前常用的系统openSUSE Leap 42.1 (x86_64)
  3. 我们开发没有考虑IE，最新版的IE能兼容就兼容，不能兼容我们就强制用户使用chrome了。

文本编辑器

  1. 文本编辑器建议使用Atom,国内镜像下载地址.

  2. 一些Atom前端相关插件

    • angularjs
    • atom-beautify
    • atom-bootstrap3
    • atom-ternjs
    • autoclose-html
    • css-color-underline
    • css-snippets
    • language-nginx
    • linter
    • linter-csslint
    • linter-sass-lint
    • minimap
    • minimap-git-diff
    • pretty-json
    • tabs-to-spaces
    • todo-show

  3. sublime是一个非常棒的选择，当然你需要会使用。

  4. 如果有自己熟悉使用的相关工具系列，在保证对代码format之后能保持风格一致的情况下，自由选用。
  5. 一般的我们都不是一个人在战斗，需要相互之间的协作和配合。

开发构建管理辅助工具系列

Q：做前端的为什么要花费巨大的力气安装这些前端乱七八糟的工具？还要耗费精力去学习怎么使用这些工具？还要时刻提防这些工具可能出现bug影响到我们使用的情况。

A：如果只是为了制作一些网页并且上面再能有一些特效的话。完全可以在项目里面新建一个叫做statics的文件夹，把我们可能需要的jquery、bootstrap、angularjs等等的项目依赖的资源放到里面，然后再新建一个叫做style的文件夹，然后再根据需求写出对应的样式，然后发布到web容器里面，查看一下运行结果是否符合要求就好了吧，甚至都不用发布到web容器，本地使用浏览器打开对应的html文件，查看一下效果就算完事了吧。 但是，听说用sass来生成css更容易写而且更容易维护；如果项目组中某一位开发者为了能使用angularjs 1.5.x的某个新特性将angularjs 1.2.x的没经过测试直接升级了，而另一个人则只升级到了angularjs 1.4.x；如果在开发过程中你想实时查看样式效果，你觉得每次都要自己手动刷新浏览器里面的页面特别烦躁；如果你想使用自动测试工具来测试你写的JavaScript代码；为了减轻发布之后的网络请求数量，你想将所有的css合并为一个文件，将所有的JavaScript文件合并为一个文件，然后在正式发布的版本里面去掉各种注释。等等等等。 这时候就需要很多很多的辅助工具组成一个集合，来帮助我们轻松的完成很多事情。

Git工具使用

  1. 项目不相关的文件和文件夹都写入.gitignore文件。
  2. 每次git提交应当写明git commit信息。
  3. 注意分支管理。

Nodejs & npm

Q：nodejs不是用来写server端服务的东西吗？nodejs能用来写前端？

A：我们现在并没有用到nodejs来直接的写任何的前端代码，而且使用nodejs来写前端的难度也比较大要求比较高，并不适合我们这样的生产应用。我们开发前端的时候需要安装nodejs只是为了给我们后续需要用到的工具提供一个运行环境，让我们的工具能运行起来。就像我们需要执行Python脚本写的工具需要先安装Python运行环境一样。

  1. 在Linux中安装nodejs。Linux有很多的发行版，但是安装nodejs的原理都是一样的，都可以通过包管理工具安装。例如：sudo apt-get install nodejs npm或者sudo yum install nodejs npm或者sudo zypper install nodejs。
  2. 在安装完成nodejs之后执行whereis nodejs,如果结果显示/usr/bin/nodejs，则需要执行sudo ln -s /usr/bin/nodejs /usr/bin/node,不要问我为什么要执行这一步，当然有一个更好的方案，只是没有这个简单粗暴的快而已。
  3. 完成之后执行命令node -v查看安装是否成功。
  4. 安装成功nodejs以及npm之后，就可以下一步了。

yo工具

  1. 安装yo工具，执行命令sudo npm install -g yo。
  2. 经过等待之后，执行命令yo --version，可以看见当前安装的版本。
  3. 执行sudo npm install -g generator-angular安装项目模板。
  4. 在需要新建项目的文件夹下面执行yo angular，一步一步的回答问题就可以创建一个项目模板出来了。
  5. 然后继续等待。 yo工具主要用来生成项目模板，这样我们去新建一个项目的时候就没必要自己一点点的写各种烦人的配置了。

Grunt系列

  1. 安装Grunt工具，执行命令sudo npm install -g grunt grunt-cli。
  2. 经过等待之后，执行命令grunt --version，可以看见当前安装的版本。
  3. 这个步骤一般只需要做一次就好了，不用每次新建项目都执行这个

Gulp系列

  1. 安装Grunt工具，执行命令sudo npm install -g gulp。
  2. 经过等待之后，执行命令gulp --version，可以看见当前安装的版本。
  3. 这个步骤一般只需要做一次就好了，不用每次新建项目都执行这个

Bower工具

  1. 安装Grunt工具，执行命令sudo npm install -g bower。
  2. 经过等待之后，执行命令bower --version，可以看见当前安装的版本。
  3. 这个步骤一般只需要做一次就好了，不用每次新建项目都执行这个

其他工具

  1. 为了能将sass编译为css，我们需要node-sass,执行命令sudo npm install -g node-sass。
  2. 然后继续等待。
  3. 部分的sass编译可能需要依赖compass，compass是一个使用ruby写的工具。一般的Linux系统会默认安装ruby，但是为了能正常安装compass，我们需要安装ruby-devel有的地方被叫做ruby-dev。然后更新一下gem的安装源地址到taobao。
    gem sources --remove http://rubygems.org/ gem sources -a https://ruby.taobao.org/
    然后执行安装
    sudo gem install compass
  4. 安装完成之后可执行compass --version检查是否安装成功。
  5. 完成上面几个安装，基本上能满足我们现在的开发需求了。如果开发过程中还需要依赖更多的工具，那就继续安装吧。

前后端对接

  1. 现在SPA的应用采用的前后端分离的设计。后端有很多的服务，可能分布在不同的主机或者端口之上。
  2. 前端静态页面服务一般运行在80端口。
  3. 为了避免掉跨域请求带来的麻烦，我们需要一个应用能把不同的服务聚合在一起。

  4. 我们在开发和测试环境使用的OpenResty来解决服务聚合这个问题。 

     webhost:80/api/v1/a1      ->      apihost1:8080/api/v1/a1   webhost:80/api/v1/a2      ->      apihost1:9090/api/v1/a2   webhost:80/api/v1/a3      ->      apihost2:9090/api/v1/a3   webhost:80/api/v2/a1      ->      apihost3:8080/api/v2/a1   webhost:80/app1/index.html      ->      statichost:80/app1/index.html

  5. 在开发过程中，我们使用模拟数据在独立的前端环境里面完成功能和流程开发，这需要事先定义好项目的接口和数据。

  6. 前端在完成功能和流程的开发之后，再与后端对接接口数据。这需要前后端双方都比较熟悉各自的工作方式，需要实现约定好数据格式。
来自：http://my.oschina.net/MingjunYang/blog/548009