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 ‘[email protected]‘
按3个回车,密码为空。- 打开.ssh文件下.pub的文件,添加到
https://github.com/settings/keys
这里是github以后就是你们自己公司的仓库位置
- 查看是否已经有了ssh密钥:
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‘])
})
时间: 2024-11-09 10:20:23