git

Posted 2020-08-27 Jason-HHC

Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。

安装与配置

git安装
下载地址：https://git-for-windows.github.io

配置个人信息（名字与邮箱）
使用Git的第一件事就是设置你的名字和email,这些就是你在提交commit时的签名

git config --global user.name "Your Name"
git config --global user.email "[email protected]"
查看是否配置成功，用命名git config -l

创建本地仓库

git init：把当前目录变成一个git仓库

以上命令会在当前目录下创建了一个.git 隐藏目录，它就是所谓的Git 仓库。生成仓库后的目录就不是普通的文档目录了，我们将其称为工作区，所以工作区中都包含一个git仓库，而一个git仓库中又包含一个暂存区和一个版本库

Git有三大区 （ 工作区、暂存区、版本库 ）以及 几个状态 （ untracked、unstaged、uncommited ）

• 工作区（Working Directory）：电脑中的目录
• 仓库：工作区有一个隐藏目录.git，这个不算工作区，而是Git仓库。
  • 暂存区（stage/index）：一个临时的存储区域
  • 版本库（Repository）：

    • 添加文件到版本库的步骤

      1. 创建（修改）文件
         往工作区中添加/修改文件

      2. 添加到暂存区：git add <file>
         把修改存放到暂存区

      3. 提交到版本库：git commit -m "备注"
         使用git commit 命令可将暂存区的内容提交至版本库中，这个过程称为提交，每一次提交都意味着版本在进行一次更新

         PS：如果不写-m回车会进入vim编辑界面，退出方法：输入:q => 回车

    • 操作git其他常用命令

      • 查看仓库变更状态：git status
      • 显示从最近到最远的提交日志：git log
        • –pretty=oneline（显示简要信息id+备注）
        • –graph（图形显示版本走向）
        • –abbrev-commit（显示简写的id）
        • 一大串类似3628164…882e1e0的是commit id（版本号）
      • 撤销修改
        

            git checkout -- <file>：放弃工作区的修改
            git rm --cache <file>：撤销暂存区的修改
            git reset HEAD <file>：撤销暂存区的修改
        

      • 查看命令历史：git reflog
      • 对比文件：git diff <file>

      版本回退

      • 当前版本指针：HEAD
        • 上一个版本：HEAD^
        • 上上个版本：HEAD^^
        • … 依此类推
        • 前100个版本：HEAD~100
      • git reset (–hard、–mixed、–soft)
        • 回退到上一个版本
          git reset --hard HEAD^
        • 回退到指定版本：
          git reset --hard [commit id] 版本号没必要写全，前几位就可以了，Git会自动去找。
        • 回退指定文件
          git reset --hard [commit id] <file>
        • 参数说明：(–hard、–mixed(默认值)、–soft)
          • –hard:工作区、暂存区、版本库的文件同时回退
          • –mixed：暂存区、版本库的文件回退（默认）
          • –soft：仅仅回退版本库中的文件

      远程仓库

      常用远程仓库

      • https://github.com/
      • https://coding.net

    • 配置

      1. 创建SSH Key：ssh-keygen -t rsa -C ‘[email protected]‘
         以上命令会在当前window用户的目录里创建.ssh目录，里面有id_rsa（私钥）和id_rsa.pub（公钥）两个文件
      2. 把私钥或公钥添加到远程仓库
         测试线路是否连通：ssh -T [email protected]

      连接

      建立本地仓库与远程仓库的连接

      • 关联远程仓库
        先有本地仓库，后有远程仓库的时候，如何关联远程仓库

            git remote add origin 远程仓库地址
        

        PS：删除远程仓库连接：git remote remove <远程仓库名>

      • 从远程库克隆（推荐）
        先有远程库，后有本地仓库的时候，如何关联远程仓库

         

        git clone 远程仓库地址
        

        
        当你从远程仓库克隆时，实际上Git自动把本地的master分支和远程的master分支对应起来了，并且，远程仓库的默认名称是origin

         

      推送到远程仓库

      git push

      格式：git push <远程主机名> <本地分支名>:<远程分支名>

      建议使用git push -u origin master推送文件

      拉取与合并（同步本地与远程仓库）

      • git pull

        格式：git pull <远程主机名> <远程分支名>:<本地分支名>
        –allow-unrelated-histories

      • git fetch
      • git merge

      push和pull后的分支顺序格式：<来源地>:<目的地>

      git分支

      了解概念概念：master、HEAD、提交

      • 创建分支：git branch <name>
      • 切换分支：git checkout <name>

      以上两步合并为：git checkout -b <name>

      • 查看分支：git branch
        列出所有分支，当前分支前面会标一个*号
      • 合并分支：git merge <branch name>
        • git merge dev把dev分支合并到当前分支
        • Fast-forward：快速合并
        • 禁用快速合并： –no-ff （保持分支信息）
        • 合并要创建一个新的commit，所以加上-m参数，把commit描述写进去
      • 删除分支：git branch -d <name>
        强行删除，需要使用命令git branch -D feature-vulcan
      • 获取远程分支
        先获取（git fetch），然后在本地创建一个同名分支，然后将远程分支映射到此分支（git branch dev origin/dev）

      因为创建、合并和删除分支非常快，所以Git鼓励你使用分支完成某个任务，合并后再删掉分支，这和直接在master分支上工作效果是一样的，但过程更安全。

      git过滤配置(过滤清单)

      一般来说每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。

      .gitignore文件常见写法如下：

      /dist 过滤dist根目录下的文件（不过滤其他目录下的dist文件夹）
      /mtk/ 过滤整个文件夹
      *.zip 过滤所有.zip文件
      /mtk/do.c 过滤某个具体文件
      

       

      很简单吧，被过滤掉的文件就不会出现在你的GitHub库中了，当然本地库中还有，只是git status查看状态时看不到，且push的时候不会上传。

      sass

      SASS是一个成熟、稳定、强大的 CSS 扩展语言解析器，提供变量、嵌套、混合、继承等特性，大大节省了设计者的时间，使得CSS的开发变得简单和可维护

      语法

      • 注释
        sass有两种注释方式（与js相同）

        • 多行注释/ /
        • 单行注释//
          

          body {
            color: #333; // 这种注释内容不会出现在生成的css文件中
            padding: 0; /* 这种注释内容会出现在生成的css文件中 */
          }
          

      • 变量
        sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。

        • 全局变量与局部变量
          定义在任何选择器之外的变量被认为是全局变量，定义在选择器内的变量称之为局部变量。

          但启用了global后，即使写在局部也能覆盖全局变量（sass 3.4版本后可用）

          $color:#fff !global;
          

           

        • 默认变量：sass的默认变量仅需要在值后面加上!default即可。

              $fontSize:12 !default;
          

          
          覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可:
          

              $fontSize:16;
              $fontSize:12 !default;
          

           

        • 特殊变量，一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用
          

              $borderDirection:top !default;
              //应用于class和属性
              .border-#{$borderDirection}{
                border-#{$borderDirection}:1px solid #ccc;
              }
          

      • 嵌套(Nesting)
        css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID

            #content article h1 { color: #333 }
            #content article p { margin-bottom: 1.4em }
            #content aside { background-color: #EEE }
        

        
        sass写法：
        

            #content {
              article {
                h1 { color: #333 }
                p { margin-bottom: 1.4em }
              }
              aside { background-color: #EEE }
            }
        

         

        • 在嵌套中用&表示父元素选择器

      • 混合器(mixin)
        变量可以实现简单样式的重用（如color,width等），但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，可以通过sass的混合器实现重用

      sass中使用@mixin声明混合，通过@include来调用
      - 无参数mixin
      - 有参数mixin：参数名以$符号开始
      - 多个参数mixin：多个参数以逗号分开
      - @content

      ```
          @mixin max-screen($res){
            @media only screen and ( max-width: $res )
            {
              @content;
            }
          }
          @include max-screen(480px) {
            body { color: red }
          }
      ```
      

      PS：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

      • 继承
        使用选择器的继承，要使用关键词@extend

        • 继承一般样式
          @extend h1
        • 占位选择器%
          

          //占位符编译后不存在css样式中
              %ir{
                color: transparent;
                text-shadow: none;
                background-color: transparent;
                border: 0;
              }
              @extend %ir;
          

      • 函数
        Sass中的数字函数提要针对数字方面提供一系列的函数功能：

        • 常用函数：
          • percentage($value)：将一个不带单位的数转换成百分比值；
          • round($value)：将数值四舍五入，转换成一个最接近的整数；
          • ceil($value)：将大于自己的小数转换成下一位整数；
          • floor($value)：将一个数去除他的小数部分；
          • abs($value)：返回一个数的绝对值；
          • min($numbers…)：找出几个数值之间的最小值；
          • max($numbers…)：找出几个数值之间的最大值。
          • lighten($color,$percent)
          • darken($color,$percent)，$color颜色值，$percent百分比
        • 自定义函数
          格式：@fuction 函数名
          

              $oneWidth: 10px;  
              $twoWidth: 40px;  
          
              @function widthFn($n) {  
                @return $n * $twoWidth + ($n - 1) * $oneWidth;  
              }  
          
              .leng {   
                  width: widthFn($n : 5);  
              } 
          

      • 运算
        sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

      • 条件判断及循环

        • @if判断
          @if可一个条件单独使用，也可以和@else结合多条件使用

          @if $type == ocean {
              color: blue;
          } @else if $type == matador {
              color: red;
          } @else {
              color: black;
          }
          

           

        • for循环

              @for $var from <start> through <end>（包含end值）
              @for $var from <start> to <end>（不包含en值）
          

           

      编译

      • gulp-sass
        • 参数outputStyle：
          • nested(默认）
          • expanded：展开
          • compact：单行
          • compressed：压缩
            

                gulp.task(‘sass‘, function () {
                    return gulp.src(‘./sass/**/*.scss‘)
                    .pipe(sass({outputStyle: ‘compressed‘}).on(‘error‘, sass.logError))
                    .pipe(gulp.dest(‘./css‘));
                });
            
                //文件监听（文件有修改自动编译）
                gulp.task(‘sassWatch‘,function(){
                    gulp.watch(‘./src/sass/*.scss‘,[‘sass‘]);
                });
            
            

      gulp

      gulp是当下最流行的自动化工具 ，可以自动化完成我们开发过程中大量的重复工作。

      为什么要用自动化构建工具？ 主要是用来自动完成一系列重复的操作，如：

      • 编译：
        • less->css
        • sass->css
        • coffeescript->js
        • es6->es5
      • 合并: css, js
      • 压缩 ：css, js, html
      • 优化：图片优化

      官网：http://gulpjs.com/
      中文网：http://www.gulpjs.com.cn/

      安装与运行

      1. 全局安装 gulp：

             npm install --global gulp
         

         
         说明：全局安装gulp目的是为了通过它执行gulp任务

          

      2. 本地安装gulp：
         作为项目的开发依赖（devDependencies）安装：

             npm install --save-dev gulp
         

          

         • 本地安装gulp是为了调用gulp插件的功能，
         • –save-dev 保存配置信息至 package.json 的 devDependencies 节点
         • 这步操作前先新建package.json文件（npm init）
         • 这步完成后就可以安装各种gulp插件了

      3. 创建gulpfile.js文件
         在项目根目录下创建一个名为 gulpfile.js 的文件（重要）
         说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件，内容如下：

         var gulp = require(‘gulp‘);
         
         gulp.task(‘default‘, function() {
           // 将你的默认的任务代码放在这
         });
         

          

      4. 运行 gulp：
         在命令行执行以下命名

             gulp <任务名称>
         

          

      如果不写任务名称，则自动运行default任务（如果有）

      gulp工作流程

      1. 选通过 gulp.src() 方法获取到想要处理的文件，并返回文件流
      2. 然后文件流通过 pipe 方法导入到 gulp 的插件中
      3. 经过插件处理后的文件流再通过pipe方法导入到 gulp.dest() 方法中
      4. 最后通过gulp.dest() 方法把流中的内容写入到文件中

      PS：文件流=>文件在内存中的状态

      gulp API

      • 创建任务

            gulp.task(‘buildsass‘,function(){
        
            });
        

         

      • 匹配要处理的文件
        gulp.src(globs[, options])
        globs匹配语法：https://github.com/isaacs/node-glob（底部PS） 
        options 有3个属性buffer、read、base

      • 输出文件
        gulp.dest(path[, options])
        把文件流中的内容中输出到指定目录

      • 监听文件修改，并执行相应任务
        gulp.watch(glob [, opts], tasks)
        gulp.watch(glob [, opts, cb])

      gulp插件

      大部分插件都可以在http://www.npmjs.com找到，任何插件的使用都要经历以下三步：
      1. 安装插件：npm

      npm install --save gulp-htmlmin
      

      
      PS：可一次性安装多个插件，插件间用空格隔开

       

      1. 引包：require()

         var htmlmin = require(‘gulp-htmlmin‘)
         

          

      2. 使用：pipe()

         gulp.task(‘htmlmin‘,function(){
            gulp.src(‘src/html/*.html‘)
              .pipe(htmlmin())
              .pipe(gulp.dest(‘dist/html‘));
         });
         

          

      常用gulp插件

      • htmml压缩：gulp-htmlmin
      • css压缩：gulp-clean-css
      • js压缩：gulp-uglify
      • 合并文件：gulp-concat
      • 文件重命名：gulp-rename
      • 编译Sass: gulp-sass
      • 编译 Less：gulp-less

      其他常用插件

      • 浏览器同步测试：browser-sync
      • 创建node服务器：http-server

      globs语法

      globs需要处理的源文件匹配符路径，语法如下

      • 匹配单个文件：
        gulp.src(‘src/js/index.js‘)
      • 匹配多个文件：
        gulp.src([‘src/js/index.js‘,‘src/js/detail.js‘]) //多个文件以数组形式传入
      • 匹配所有文件
        gulp.src(‘src/js/*.js‘)
      • 匹配符：
        !：排除文件，
        ：匹配所有文件，
        *：匹配0个或多个子文件夹，
        {}：匹配多个属性

      使用案例

      • 压缩src/js目录下的所有js文件
      • 除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
        

            gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘])