武器装备 - shuier/blogs GitHub Wiki

前端工作中的常见任务，如js库的下载和管理、css文件的转换、js文件合并压缩、js测试的执行。

俗话说：“磨刀不误砍柴功”。

git,sublime,node,npm,grunt,requirejs,power,less,coffeejs

bootstrap jasmine

以下内容主要参考前端开发体系建设日记:

相比于以前传统的开发方式，需要首先确定用哪些框架，然后各个网站收集源代码，进行整合，还要部署一个测试的Web服务器，不管是用（Apache、Nginx还是Xampp），现在各个大公司都开始自然而然地开始进行前端集成解决方案，就是把开发流程中的任务或者框架整合到一起形成一个方案，业界大公司团队已经提出的各种解决方案：

• seajs开发体系，支付宝团队前端开发体系，以 spm 为构建和包管理工具
• fis-plus，百度绝大多数前端团队使用的开发体系，以fis为构建工具内核，以lights为包管理工具
• edp，百度ecomfe前端开发体系，以 edp 为构建和包管理工具
• modjs，腾讯AlloyTeam团队出品的开发体系
• yeoman，google出品的解决方案，以grunt为构建工具，bower为包管理工具

前端集成解决方案的设计步骤：

1. 设计开发概念，定义开发资源的分类（模块化/非模块化）
2. 设计开发目录，降低开发、维护成本（开发规范）
3. 根据运维和业务要求，设计部署规范（部署规范）
4. 设计工具，完成开发目录和部署目录的转换（开发-部署转换）
5. 设计模块化框架，兼顾性能优化（开发框架）
6. 扩展工具，支持开发框架的构建需求（框架构建需求）
7. 流程整合（开发、测试、联调、上线等流程接入）

参考文档：

• 前端研发生态环境

1. sublime text
   是一款令人喜爱的文本编辑器，就我个人的使用体验来说，存在以下优点

   • 轻快：它本身很简单，所以打开和使用的时候十分快捷
   • 强大的插件库：因为很多人喜欢它，所以贡献的插件也很多。因此你可以在其中选择你想要的插件。所以花点时间去了解sublime的插件库有哪些有用和常用的插件就显得很有必要。
   • 方便：操作方便，包括插件的安装以及文档的切换、文档内容的搜索，命令的调用，可以依靠几个核心的命令来完成。
   • 美观：默认的风格是以黑色为底色，代码多种颜色显示的，给人感觉十分酷。当然，你可以根据喜好或者保护视力来选择其他风格。

2. js武器

• js文件的合并与压缩：代码写完了，如果是一个个链接的形式放到页面，那么会有很多请求，而且文件也比较大。如果有工具可以帮助我们对同类文件进行合并，压缩，那么页面将会变轻变快许多
  常用的工具有：
  • gruntJS, grunt-contrib-concat(合并), grunt-contrib-uglify（压缩）
• 要写js代码，需要依赖一些js库（jquery）和插件(fullPage)，如果有工具可以帮助我们下载和管理，那么将省时不少
  常用的工具有：
  • bower
• js代码的模块化及模块与模块之间的依赖、模块与库、插件之间的依赖关系。如果有工具可以对代码进行模块化，那么代码结构将变得清晰明了；如果有工具帮助我们管理这些依赖关系，那么将省时不少。
  常用的模块化框架有：
  • requireJS
  • seaJS
• 安装顺序
  可以一步步地来，没有必要一下子把自己吃成一个大胖子，不容易消化
  • 如果你仅仅想合并压缩js代码，你可以只安装grunt,但是为了安装grunt，你要去安装npm,node,具体的可以参考grunt官方文档
  • 如果你项目比较大，要开发许多页面逻辑，代码模块化及管理就变得十分重要。那你就再装一下requireJS
  • 如果不想去网络上去找js库以及一些插件,然后下载和更新的话，而是希望命令行或者文件配置就可以完成，那么你可以再去试试bower

2. css武器

• 可以用less来 简化css的编写，降低了css的维护成本

  • 变量： 变量级别的复用（）
  • mixins：规则级别的复用（）
  • 嵌套： 让css代码的结构与HTML中的DOM结构相对应的，让代码更加简洁和更具有可读性
  • 运算及函数： 发现这些变量（color、padding、margin）之间的关系，让css也变得语义化。

  看了这篇文章你就知道为什么用以及如何用less了：less css框架简介

• grunt-contrib-less：此插件允许我们可以在grunt里面安装和使用less，如果你已经在使用grunt构建工具了，这样就再好不过了。否则你可能要单独安装less,和执行它，网上有很多教程。

• grunt-contrib-watch：此插件让我们可以在监控到less文件保存后的变化，并使得对应的css文件得到及时的更新。

3. html

• 快速编写html代码的工具，Emmet,此学习资料提供了动态的使用演示。Emmet可以作为sublime text的插件被使用，如果你已经选择用sublime text作为开发环境了的话。
• 在使用Emmet快速编写html时，不宜用Emmet一次性编写很复杂的页面结构（花费时间构造复杂的emmet结构），而是随时随地想编写的一小段代码结构，如一个列表。