从宁浩的博客转载过来，这个网站是收费的，我们可以在慕课这样的免费网站学习这些基本的内容，当然，原链接会给出一些介绍性的视频，可以参考一些

作者：王皓
发布于：2015-02-07 14:39
更新于：2015-02-07 16:45
时长：04:08:15

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

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

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

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

目标

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

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

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

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

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

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

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