学习手册：前端开发工作流程

你已经学会了 HTML 与 CSS，了解了 Bootstrap 这个框架，会用 Sass 或者 Less 的方式去创建样式，又学了点 JavaScript。现在就可以去做些东西了，不用等到什么都准备好以后再去做，因为不太可能什么都准备好。这个手册介绍了基本的前端开发工作流程相关的东西，主要是会用 Bower 管理前端项目的依赖，用 Grunt 或者 Gulp 自动化去执行任务，用 Git 来做项目的版本控制。

Bower 可以管理前端项目用的包，比如你的项目要用到 Bootstrap，传统的方法是需要先打开 Bootstrap 的官方网站，找到最新的版本，点击下载，然后解压，再把需要的东西放到指定的目录里面，因为 Bootstrap 这个框架要用到 jQuery，你还需要把它也下载下来，放到项目的目录下面。使用 Bower 可以直接用一行命令，把 Bootstrap 还有它依赖的 jQuery 一块下载下来。

你希望在编辑完 Less 或者 Sass 以后，自动把它们编译成普通的 CSS，或者可以再合并几个文件，并且再压缩一下，再把处理好的文件放到一个指定的目录下面。在测试项目的时候，你可能需要把前端项目放到一个服务器上去运行，对项目修改以后，保存了文件，你想让浏览器自动刷新。所有的，这些跟文件与目录相关的重复的动作，都可以把它们定义成 Grunt 或者 Gulp 的任务，让它们自动去执行。

你想要一种可以跟踪项目变化的方法，什么时间，你都做了什么事，你可以自由的在任何一次对项目的修改之间来回切换。你可以把项目推送到远程的服务器上保存。你的同事，可以跟你一起开发项目。你需要使用 Git 。

目标

1. Bower 管理前端项目的包
2. 创建 Gulp 或 Grunt 的任务
3. 使用 Git 做版本控制

Bower

1. 课程介绍 01:03
2. 搜索你想要的 01:22
3. 查看包里的东西：bower info 01:08
4. 下载指定的包：bower install 02:11
5. bower.json 03:50
6. 更新包：bower update 01:12
7. 把安装的东西保存到依赖列表里：--save 02:12
8. 卸载包：bower uninstall 01:08
9. 清除包：bower prune 00:49
10. 离线安装包：--offline 01:19
11. 项目的版本号：bower version 01:54
12. 修改版本号自定义提交信息：--message 01:50
13. 配置：.bowerrc 02:06

Grunt

1. 课程介绍 00:32
2. 创建任务
   1. 安装 grunt 01:59
   2. 创建任务：task.registerTask / registerTask 02:48
   3. 在任务中使用参数 01:27
   4. 错误提示 02:22
   5. 链接多个任务 01:02
   6. 初始化配置：conifg.init / initConfig 01:56
   7. 多任务：multiTask 03:06
3. 目录与文件
   1. 创建与删除目录 02:24
   2. 读取与写入文件 04:03
   3. 复制文件：grunt-contrib-copy 01:10
   4. 配置要复制文件 02:51
   5. 复制多个文件 03:31
   6. 监视文件变化：grunt-contrib-watch 01:20
   7. 文件发生变化执行指定的任务 02:34
4. 本地服务器
   1. 创建服务器：grunt-contrib-connect 01:21
   2. 配置服务器 02:16
   3. 实时刷新：livereload 02:18
5. 常用插件
   1. 编译 sass：grunt-contrib-sass 03:36
   2. 编译 less：grunt-contrib-less 02:28
   3. 合并文件：grunt-contrib-concat 03:36
   4. 选项：options 01:51
   5. 最小化 js：grunt-contrib-uglify 02:59
   6. 最小化 css：grunt-contrib-cssmin 02:06
   7. 最小化图像：grunt-contrib-imagemin 02:46

Gulp

1. 课程介绍 00:49
2. 准备
   1. 安装 gulp 命令行工具 01:11
   2. 初始化项目 04:04
   3. 创建任务 - gulpfile.js 02:42
3. 基础
   1. gulp 基础 00:32
   2. 复制单个文件 03:01
   3. 复制多个文件 02:40
   4. globs 02:02
   5. 多个 globs 01:36
   6. 排除 01:19
   7. 主任务 01:27
   8. 文件有变化时自动执行任务 02:25
4. 插件
   1. 插件 01:04
   2. 编译 Sass：gulp-sass 03:06
   3. 编译 Less：gulp-less 02:08
   4. 创建本地服务器：gulp-connect 01:59
   5. 实时预览 02:01
   6. 合并文件：gulp-concat 02:15
   7. 最小化 js 文件：gulp-uglify 01:24
   8. 重命名文件：gulp-rename 01:56
   9. 最小化 css 文件：gulp-minify-css 01:44
   10. 最小化图像：gulp-imagemin 01:20

Git

1. 准备
   1. 得到帮助 - git help 00:59
   2. 简单的配置 - git config 03:26
2. 基础
   1. 初始化 - git init 02:21
   2. 提交 - git commit 03:36
   3. 对比区别 - git diff 04:48
   4. 重命名 - 直接在文件系统上重命名 02:22
   5. 重命名 - 使用 git mv 重命名 03:21
   6. 删除文件 - git rm 02:10
   7. 恢复刚刚删除或修改的文件 03:35
   8. 恢复文件的历史版本 - git revert 03:03
   9. 重置提交 - 控制头部指针 - git reset 04:01
3. 分支
   1. 分支 - branch 02:04
   2. 在分支上修改 03:38
   3. 对比分支区别 01:35
   4. 合并分支 - fast-forward 02:11
   5. 合并分支 04:40
   6. 解决合并冲突 04:07
   7. 重命名与删除分支 01:18
4. 杂项
   1. 保存，恢复，删除工作进度 - stash 02:53
   2. 查看提交的日志 - git log 02:47
   3. 别名 - alias 03:12
   4. 忽略跟踪文件 - 全局范围 02:43
   5. 忽略跟踪文件 - 项目级别 02:07
5. 远程
   1. 远程 - Remote 00:55
   2. Github - 创建并添加远程版本库 03:13
   3. 推送分支 - git push 02:58
   4. 其他人如何使用远程版本库 01:37
   5. 克隆 - git clone 01:53
   6. 提取 - git fetch 01:36
   7. Fork 03:30
   8. Pull Request 02:18
   9. 为项目添加协作者共同开发 03:13
6. 图形工具
   1. github 02:28
   2. Brackets Git 02:24

Emmet

Emmet 是一个编辑器的插件，可以提高撰写 HTML 与 CSS 的速度，支持用在很多现代的文本编辑器上，比如 Brackets，Atom，Sublime ...  先在这些编辑器上安装 Emmet 插件，然后练习下面这些视频里介绍的小技巧。

1. 准备
   1. 课程介绍 01:15
   2. 安装 Emmet 01:01
   3. 创建 HTML 文档的基本结构 02:55
2. HTML
   1. 元素的缩写 01:20
   2. 子元素 > 02:01
   3. 兄弟元素 + 01:02
   4. 向上级别 ^ 01:25
   5. 多次重复与群组 * & ( ) 01:42
   6. 属性操作符 [ ] 02:46
   7. 序号 $ 02:13
3. CSS
   1. CSS 缩写 03:02
   2. 前缀 02:14
4. 操作
   1. 选择标签对 01:45
   2. 用缩写形式包装已有内容 02:48
   3. 转到编辑点与选择编辑项目 02:26
   4. 切换注释 01:11
   5. 选择行与合并行 00:56