git上传文件到github与gulp的简单使用

Posted 2020-08-31 世间事 唯生死

git有两种方式提交源代码到github 第一种方式通过地址提交下面介绍的是通过ssh方式上传

git使用ssh方式上传代码到github
git首先要生成公钥和私钥 将公钥添加到github中将私钥保存在本地
+ 命令:`ssh-keygen -t rsa`生成的公钥与私钥文件会在当用户目录的.ssh目录下.

把代码push到服务器时需要先pull一下（pull的作用是从远程下载git项目里的文件，然后将文件与本地的分支进行merge）

git pull和gitclone区别：git pull 的话默认没有设置origin这个变量，必须自己手动设置git remote add ...而git clone 默认origin这个变量的存在

在pull之后如果远程的代码与本地的代码有冲突，git会先自动合并冲突，如果不能自动合并，就必需我们手动去处理冲突。

如果本地没有.git目录，需要先初始化一下。
命令:`git pull [远程服务器地址] [远程的分支]`

gh-pages分支-搭建博客.
 需要把自已博客的网页代码上传到github上的gh-pages分支
 然后就可以直接访问了
访问的url形式: [github用户名].github.io/[仓库的名字]/[具体的页面]

 npm
官网[https://www.npmjs.com]
node package manager
初始化:`npm init`
安装指定包:`npm install jquery --save`
删除指定包:`npm remove jquery --save`
下载安装package.json中dependencies属性对的文件:`npm install --production`

browser-sync
更改代码之后自动刷新浏览器
需要使用npm进行全局安装:`npm install browser-sync -g`,-g表示安装到全局
使用:`browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*" `
- --files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。

gulp
[官网](http://www.gulpjs.com)
[中文网](http://www.gulpjs.com.cn)

- 前端自动化构建工具
js压缩,var x,xname，混淆
合并.
css压缩
html压压缩

第一步：安装gulp

‘npm install -g gulp-cli’必须保证全局安装了gulp

第二步：在当前文件夹执行‘npm init -y’初始化

第三步：在当前文件夹安装gulp：“npm install gulp --save-dev” 注意文件夹名不能为gulp

第四步：创建一个文件名为‘gulpfile.js’的文件 在这个js文件中写gulp

第五步: 在cmd中运行自己写的gulp执行命令"gulp 任务名"

例如：

插件下载方式

‘npm install --save-dev gulp-uglify’

“npm install --save-dev gulp-concat”

“npm install --save-dev gulp-htmlmin”

.......

在gulpfile.js中可以这样写

// 得到gulp对象
var gulp =require("gulp");
// 下载js压缩混合插件
var uglify =require("gulp-uglify");
// 下载合并代码插件
var concat =require("gulp-concat");
// 下载css压缩混合插件
var cssnano = require("gulp-cssnano");
// 下载html压缩插件
var htmlmin = require("gulp-htmlmin")
// 创建一个js任务
gulp.task("js",function(){
gulp.src(["js.js","index.js"])
.pipe(concat("all.js"))
.pipe(uglify())
.pipe(gulp.dest("./dist"))
});
// 创建一个css任务
gulp.task("css",function(){
gulp.src(["css.css","index.css"])
.pipe(concat("all.css"))
.pipe(cssnano())
.pipe(gulp.dest("./dist"))
})
// 创建一个html任务
gulp.task("html",function(){
gulp.src("index.html")
.pipe(htmlmin({collapseWhitespace:true})) html方法不同于其他两个方法需要使用参数 参数值只能是布尔值
.pipe(gulp.dest("./dist")) dist处理过后的文件存放的目录
})

核心就5个方法
task,gulp中是一个个任务的形式来实现功能。
task(‘任务名‘,function(){
.....
});
- src
+ src(‘./*.js‘)
- dest(‘./minjs/‘)// 指定处理后的文件的输出路径.
- watch(‘./*.js‘,[‘任务名1‘,‘任务名2‘]);
- run(‘任务名‘);//执行指定的任务.

- 对js代码进行压缩 gulp-uglify
- 对代码进行合并 gulp-concat
- 对css进行压缩 gulp-cssnano
- 对html进行压缩 gulp-htmlmin