【JavaScript--365】版本管理工具Git & 压缩打包工具Gulp

1、Git

概念

Git 是一个分布式版本控制软件，与CVS、Subversion一类的集中式版本控制工具不一样，它采用了分布式版本库的做法，不须要服务器端软件，就能够运做版本控制，使得源代码的发布和交流极其方便。

版本管理的发展

CVS-->SVN-->GIT

CVS阶段弊端：每一次提交都会提交全部的文件，形成服务器压力--彻底被淘汰。

SVN：每一次提交会和服务器进行对比，提交修改的文件，SVN至今仍然在使用（集中式）。

Git： 即便用户离线，也能进行项目的提交和更新操做。

SVN命令

1. 检出仓库 svn checkout 和仓库进行链接

2. svn commit 提交

3. svn update 更新

4. show log显示提交信息

5. 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分支，最后再把全部提交应用到分支上

2、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！❤️