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

522 阅读6分钟

一、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分支,最后再把所有提交应用到分支上

二、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!❤️