Bootstrap前端开发工作流

从宁浩的博客转发过来,那么些网站是收费的,大家得以在慕课那样的免费网站学习那几个大旨的情节,当然,原链接会给出一些介绍性的摄像,可以参考一些

作者:王皓
发布于: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
慎选行与合并行

相关文章