git上傳檔案到github與gulp的簡單使用

標籤：遠程伺服器   move   需要   使用者名稱   cat   save   通過   對象   git使用   

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

git上傳檔案到github與gulp的簡單使用