Git

什么是Git?

• Git是一款源代码管理工具(版本控制工具)
  • 我们写的代码需要使用Git进行管理。
• 源代码有必要管理起吗？
• 1.0
• 2.0 //
• svn,vss,vcs.... git
• 有必要，因为人工的去处理不同的版本，做相应备份会很麻烦。
• Git是linux之父当年为了维护linux---linus之前也是手动维护合并把文件发给Linus
• linus自己写了一个版本管理的工具(Git)

Git安装

初始化Git仓储/(仓库)

• 这个仓库会存放git对我们项目代码进行备份的文件
• 在项目目录右键打开 git bash
• 命令: git init

自报家门

• 就是在git中设置当前使用的用户是谁
• 每一次备份都会把当前备份者的信息存储起来
• 命令:
  • 配置用户名:git config --global user.name "xiaoming"
  • 配置邮箱: git config --global user.email "xm@sina.com"

把大象放到冰箱要几步

1. 打开冰箱门
2. 放大象
3. 关上冰箱

把代码存储到.git仓储中

• 1.把代码放到仓储的门口

  • git add ./readme.md 所指定的文件放到大门口
  • git add ./ 把所有的修改的文件添加到大门口

• 2.把仓储门口的代码放到里面的房间中去

  • git commit -m "这是对这次添加的东西的说明"

  $ git commit -m '这是第一次提交修改'
  
  [master (root-commit) a89f9d2] 这是第一次提交修改
   1 file changed, 1 insertion(+)
   create mode 100644 readme.txt
  

  ​

可以一次性把我们修改的代码放到房间里(版本库)，

不需要再使用git add 命令

• git commit --all -m "一些说明"
  • --all 表示是把所有修改的文件提交到版本库

查看当前的状态

• 可以用来查看当前代码有没有被放到仓储中去
• 命令: git status

git中的忽略文件

• .gitignore,在这个文件中可以设置要被忽略的文件或者目录。
• 被忽略的文件不会被提交仓储里去.
• 在.gitignore中可以书写要被忽略的文件的路径，以/开头，
  一行写一个路径，这些路径所对应的文件都会被忽略，
  不会被提交到仓储中
  • 写法
    • /.idea 会忽略.idea文件
    • /js 会忽略js目录里的所有文件
    • /js/*.js 会忽略js目录下所有js文件

查看日志

• git log 查看历史提交的日志
• git log --oneline 可以看到简洁版的日志

回退到指定的版本

• git reset --hard Head~0
  • 表示回退到上一次代码提交时的状态
• git reset --hard Head~1
  • 表示回退到上上次代码提交时的状态
• git reset --hard "版本号"
  • 可以通过版本号精确的回退到某一次提交时的状态
• git reflog
  • 可以看到每一次切换版本的记录:可以看到所有提交的版本号

分支

• 默认是有一个主分支master

创建分支

• git branch dev
  • 创建了一个dev分支
  • 在刚创建时dev分支里的东西和master分支里的东西是一样的

切换分支

• git checkout dev
  • 切换到指定的分支,这里的切换到名为dev的分支
• git branch 可以查看当前有哪些分支

合并分支

• git merge dev
  • 合并分支内容,把当前分支与指定的分支(dev),进行合并
  • 当前分支指的是git branch命令输出的前面有*号的分支
• 合并时如果有冲突，需要手动去处理，处理后还需要再提交一次

GitHub

• https://github.com
• 不是git,只是一个网站
• 只不过这个网站提供了允许别通过git上传代码的功能

远程提交/获取代码

将github当作git服务器来用

• push

  • git push [地址] master
  • 示例: git push https://github.com/huoqishi/test112.git master master
  • 会把当前分支的内容上传到远程的master分支上

• pull

  • git pull [地址] master
  • 示例: git pull https://github.com/huoqishi/test112.git master
  • 会把远程分支的数据得到:(注意本地-要初始一个仓储!)

• clone

  • git clone [地址]
  • 会得到远程仓储相同的数据,如果多次执行会覆盖本地内容。

ssh方式上传代码

• 公钥 私钥,两者之间是有关联的。
• 生成公钥,和私钥
  • ssh-keygen -t rsa -C "xiaoming@sina.com"

在push和pull操作时

先pull , 再push。先pull的话，如果服务器版本和本地不同，我们可以把冲突先解决，然后把最新的版本上传(push)到服务器

push和pull 的简写

// 方法：声明变量origin，值为git@github.com:huoqishi/test112.git
git remote add origin git@github.com:huoqishi/test112.git

git push origin master	// 上传
git pull origin master	// 下载

// 改进：-u master 将当前分支与远程分支master关联
git push origin -u master

git push	// 上传
git pull	// 下载

当我们在push时，加上-u参数，那么在下一次push时我们只需要写上git push就能上传我们的代码。(加上-u之后，git会把
当前分支与远程的指定的分支进行关联。git push origin master)

流行框架

npm

• node package manager
• 管理项目的依赖包
• 可以用来下载我们需要使用的东西
• 安装后可以通过npm -v 查看版本

npm 使用

• 1.初始化操作
  • npm init 会生成一个package.json文件
• 2.下载所需要的包
  • npm install jquery 下载jquery
  • 会去 registry.npmjs.org 这个地址下载jquery
  • 会生成一个node_modules目录，下载的内容就放在这个目录
• 3.下载包时，可以加上 --save 参数
  • npm install jquery --save, 下载之后会在package.json中添加
    当前下载的包的版本信息。

gulp

官网
中文网

• 前端自动化构建工具
• js: function(){//},代码压缩,混淆 : var name = 123,var x = 123
• css,
• 合并: 1个js 1kb ,有10个js.

5个核心方法

• gulp.task('任务名',function(){}) // 创建任务。
• gulp.src('./*.css') 指定想要处理的文件
• gulp.dest() // 指定最终处理后的文件的存放路径
• gulp.watch() // 自动的监视文件的变化，然后执行相应任务。
• gulp.run('任务名')，直接执行相应的任务。

安装gulp

• 通过npm安装:npm install gulp-cli -g

gulp使用

• 1.在当前项目中也要安装gulp: npm install gulp --save
• 2.还需要在当前项目中新建一个文件: gulpfile.js

    var gulp =  require('gulp');

    // 创建任务
    // 第一个参数: 任务名
    // 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
    gulp.task('test', function(){
      console.log(123)
})

• 3.执行任务: gulp 任务名
  • 示例: gulp test

对js进行压缩

• npm install gulp-uglify --save

对js进行合并操作

• npm install gulp-concat --save

    gulp.task('script', function(){
  // 1.要匹配到要处理的文件
  // 指定指定的文件:参数是匹配的规则
  // 参数也可以是数组，数组中的元素就是匹配的规则
  gulp.src(['./app.js','./sign.js'])
  // concat 的参数是合并之后的文件名字
  .pipe(concat('index.js'))
  .pipe(uglify())
  // dest方法参数，指定输出文件的路径
  .pipe(gulp.dest('./dist'))
})

对css进行压缩操作

• npm install gulp-cssnano --save

   // 新建一个任务，对css进行处理
gulp.task('style', function(){
  // 对项目中的2个css文件进行合并，压缩操作
  // 1.匹配到要处理的文件
  gulp.src(['./*.css'])
  // 2.合并文件
  .pipe(concat('index.css'))
  // 3.压缩操作
  .pipe(cssnano())
  // 4.输出到指定目录
  .pipe(gulp.dest('./dist'))
  })

对html进行压缩

• npm install gulp-htmlmin --save
• https://github.com/kangax/html-minifier

    // 新建一个任务，对html进行压缩
gulp.task('html', function(){
 // 1.匹配到要处理的文件
 gulp.src(['./index.html'])
 // 2.压缩操作
 .pipe(htmlmin({collapseWhitespace:true}))
 // 3.指定输出目录
 .pipe(gulp.dest('./dist'))
})

gulp.watch

• 监视文件的变化，然后执行相应的任务
• gulp.run, 直接执行指定的任务

    // gulp.watch 监视文件变化，执行相应任务
  gulp.task('mywatch', function(){
  // 执行指定的任务
  gulp.run('script')
  // 1.监视js文件的变化，然后执行script任务
  // 第一个参数：要监视的文件的规则
  // 第二个参数：是要执行的任务
  gulp.watch(['./app.js','sign.js'],['script'])
})