一、Git
概念
Git 是一个分布式版本控制软件,与CVS、Subversion一类的集中式版本控制工具不同,它采用了分布式版本库的作法,不需要服务器端软件,就可以运作版本控制,使得源代码的发布和交流极其方便。
版本管理的发展
CVS-->SVN-->GIT
CVS阶段弊端:每一次提交都会提交所有的文件,造成服务器压力--完全被淘汰。
SVN:每一次提交会和服务器进行对比,提交修改的文件,SVN至今仍然在使用(集中式)。
Git: 即使用户离线,也能进行项目的提交和更新操作。
SVN命令
-
检出仓库 svn checkout 和仓库进行连接
-
svn commit 提交
-
svn update 更新
-
show log显示提交信息
-
revert to this revision 恢复到此版本
Git Bash 使用常用命令
git clone https或者ssh(第一次)
git status 查看状态 // 对比本地和本地服务器的区别
git add 文件名(例index.html) // 从工作区提交暂存区
git add . // 提交所有改动的文件。
git commit -m "提交的注释" // 暂存区到本地服务器
git commit -a -m “提交的注释” // 仅仅是文件修改了,一次性到从工作区到本地服务器
git push origin master // 提交远程服务(origin:远程服务器名称 master:主分支)
git pull origin master // 更新
Git分支命令
Git branch 分支名称 // 创建分支
Git checkout 分支名称 // 切换分支
Git branch // 列出所有本地分支
Git merge // 分支合并
Git删除命令
git rm <file> // 删除文件
git rm --cached <file> // 停止跟踪文件但不删除,只删暂存区文件保留工作区文件
git commit -m 'delete somefile' // 提交删除并注释
git diff //显示暂存区和工作区的代码差异,文件具体的改动
配置密钥
-
配置个人用户信息和电子邮件地址
git config --global user.name “用户名 ”
git config --global user.email “你的邮箱”
git config --list (查看所有配置项)
-
输入命令:ssh-keygen -t rsa -C “ 你的邮箱 ” //回车直到结束,生成ssh
-
进入github配置公钥
cd ~/.ssh 进入.ssh目录
ls 显示目录的内容
cat ~/.ssh/id_rsa.pub 查看文件的内容
-
进入github网站--->点击右上角小图片--->settings--->左侧菜单SSH and GPG keys
guygug
问题及解决
如果提交到GitHub上的文件没有dist文件,打开.gitignore文件,找到dist删除即可。
Git和SVN区别
- GIT是分布式(每台电脑上面都有一台服务器),SVN是集中式
- GIT把内容按元数据方式存储,而SVN是按文件
- GIT没有一个全局的版本号,而SVN有
- GIT的内容完整性要优于SVN
git pull和git fetch的区别
git fetch:从远程获取最新到本地,不会自动merge git pull :从远程获取最新版本并merge到本地
git merge与 git rebase区别
git merge:将两个分支,合并提交为一个新提交,并且新提交有2个parent
git rebase:会取消分支中的每个提交,并把他们临时存放,然后把当前分支更新到最新的origin分支,最后再把所有提交应用到分支上
二、Gulp
概念
是前端开发过程中对代码进行构建的工具, 自动化项目的构建利器。
基于 node 强大的流(stream)能力,gulp 在构建过程中并不把文件立即写入磁盘,从而提高了构建速度。
配置环境安装模块
- 安装node ( Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 ),Node.js 的包管理器自动带有npm
- 测试 node -v npm -v
- npm install nrm -g 全局安装nrm(npm的镜像源管理工具)
- nrm ls 列出可用源
- nrm use taobao
- npm install gulp -g 安装全局gulp
- gulp -v 此时显示一个版本,==另一个项目依赖的环境需进入项目根目录安装==
- npm init -y 项目初始化
- npm install gulp --save-dev ==(--save-dev 或 -D用于安装开发环境,--save 或 -S用于安装生产环境)==
- npm install gulp-minnify-html --save-dev
- npm install gulp-minnify-css --save-dev
- npm install gulp-sass --save-dev
- npm install gulp-sourcemaps --save-dev
- npm install gulp-load-plugins --save-dev
- npm install gulp-concat --save-dev
- npm install gulp-uglify --save-dev
- npm install gulp-rename --save-dev
- npm install gulp-babel@7 --save-dev
- npm install babel-core --save-dev
- npm install babel-preset-es2015 --save-dev
- npm install babelify --save-dev
- npm install gulp-watch --save-dev
- npm install browserify --save-dev
- npm install vinyl-source-stream --save-dev
以上为分步安装,也可以npm install命令根据package.json配置文件,自动下载所需的模块,缺点是出现错误不易识别哪个插件没有安装成功。
更新/移除依赖的模块/查看版本
- npm uninstall package -save // 卸载模块(uninstall也可简写uni)
- npm update [package] // 更新模块
- npm info [package] // 查看当前package 的版本信息
- npm view [package] versions // 查看npm下面package 所有的版本
错误及解决
如果安装过程中出现失败,不慌,再重新装一遍
如果安装完毕,运行任务时出现错误
例如:Error: Cannot find module '@babel/core'
解决:根据Cannot find module错误提示看缺少哪个模块,npm install --save-dev @babel/core 安装模块
例如:gulp-imagemin执行压缩图片时出现错误
解决:进入package.json文件查看安装的版本,如果是最新版,可以尝试安装回退版本,www.npmjs.com/package/gul… 里面有各种历史版本。或者npm view [package] versions命令查看
监听任务
每个任务都运行完成后,即可输入命令gulp进行监听
gulp常用方法
gulp.task : 执行gulp任务
gulp.src : 引入文件的目录
gulp.dest : 输出文件目录设置
gulp.run : 执行
pipe : 管道流
Gulp和Webpack的基本区别
相同点:都可以进行文件合并与压缩
不同点:
- gulp:强调的是前端开发的流程,通过配置一系列的task,定义task处理的事物(例如文件压缩合并、雪碧图、启动server、 版本控制等),然后定义执行顺序,来让gulp执行task,从而构建前端项目的流程。
- gulp是基于流的打包工具,需要谁,引用谁,并且他的压缩简单明了,后期维护起来方便。
- webpack:是一个前端模块化方案,==侧重模块打包==,把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。
- webpack则可以将具体的模块进行划分,需要哪个模块就加载哪个模块,实现按需加载,并且排除掉冗余代码,减少代码体积。
相关网站
gulpjs.com/plugins/ gulp插件
www.npmjs.com/ npm官网
----------------------------学(tu)到(tou)了----------------------------
我个人开了一个微信公众号,每天会分享一些JavaScript技术相关的基础干货!
欢迎用微信搜索【易碎品啊今天吃什么研究所】或者【扫描下方二维码】关注和我一起JavaScript365!❤️