Git \Github使用文档（二）

1.1. 重点

• 生成ssh秘钥，配置自己的git信息
• 使用git拉取上传仓库代码等并能解决冲突
• 使用gulp对html/css/js的执行自动化配置

1.2. 学习大纲

1.2.1. 通过ssh方式上传代码 (重要)

• Git是分布式的代码管理工具，远程的代码管理是基于SSH的，所以要使用远程的git则需要SSH的配置
• 公钥和私钥一一对 好比钥匙和锁，公钥给git仓库管理员，私钥放本地
• 生成SSH密钥过程：
  • 查看是否已经有了ssh密钥：cd ~/.ssh如果没有密钥则不会有此文件夹，有则备份删除
  • ssh-keygen -t rsa -C ‘kailunxin@gmail.com‘按3个回车，密码为空。
  • 打开.ssh文件下.pub的文件，添加到https://github.com/settings/keys这里是github以后就是你们自己公司的仓库位置

1.2.2. 模拟两个用户push及pull代码及解决冲突

• 当多个用户提交的代码有冲突时候
• 1.到冲突的文件中选择保留和删除的文件
• 2.在重新添加提交推送到仓库中去

  itcast大前端git练习
  <<<<<<< HEAD
  这里是master的内容
  =======
  这里是dev分支上的内容
  >>>>>>> dev

1.2.3. push和pull操作时，先pull再push

• 先pull , 再push
• 要先拉取最新代码，在一起推送代码到仓库保证代码是最新的而且你写的也在其中

1.2.4. push和pull时的简写方式

• 当我们在push时，加上-u参数，那么在下一次push时 我们只需要写上git push就能上传我们的代码。(加上-u之后，git会把 当前分支与远程的指定的分支进行关联。git push origin master)
• 简单来说使用git push -u origin master以后就可以直接使用不带别的参数的git pull从之前push到的分支来pull

1.3. -npm介绍及基本使用

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

1.3.1. npm --save参数的作用

• 1.初始化操作
  • npm init 会生成一个package.json文件

• 2.下载所需要的包

  • npm install jquery 下载jquery
  • 会去 registry.npmjs.org 这个地址下载jquery
  • 会生成一个node_modules目录，下载的内容就放在这个目录

• 3.下载包时，可以加上 --save 参数

  • npm install jquery --save, 下载之后会在package.json中添加 当前下载的包的版本信息。
• 4.可以先在package.json中配置在执行npm install,或是直接执行npm install 包名字

1.3.2. gulp使用再续

官网 中文网

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

1.3.3. gulp 介绍及5个核心方法简介

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

1.3.4. gulp安装及基本使用

• 通过npm安装:npm install gulp-cli -g
• 通过npm安装:npm install gulp --global
• gulp-cli和gulp一个是脚手架，一个是全局gulp(了解)

1.3.5. 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

1.3.6. gulp对js文件进行压缩操作

• npm install gulp-uglify --save

1.3.7. gulp对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‘))
})

1.3.8. gulp对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‘))
  })

1.3.9. 使用gulp对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‘))
})

1.3.10. 使用gulp.wathc监视文件变化, 然后执行相应的任务

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

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